DEV Community: Daniel Mezagini

Angular CDK | Overlays

Daniel Mezagini — Thu, 09 Mar 2023 19:43:46 +0000

Overlays son esas cosas que flotan dentro de la aplicación:

Es común ver abrir overlays en acción al click en un botón que despliega un menú flotante.

Si bien, esto se puede lograr con Angular Material, el CDK provee la interacción y el diseño va por nuestra cuenta. Sin tanto lío como modificar estilos de los componentes de Angular Material.

El overlay package proporciona una forma de abrir paneles flotantes en la pantalla.
Descripción Oficial

De acuerdo a la documentación del CDK, lo primero que se debe realizar es importar los estilos. Son un conjunto de estilos mínimos estructurales que necesita el paquete para funcionar correctamente.

Estos deberán colocarse en el archivo de estilos del proyecto:



// CDK
@import '@angular/cdk/overlay-prebuilt.css';

Ahora hay que importar el módulo OverlayModule dentro del módulo donde estará ese componente, o si será utilizado en toda la aplicación; en el app.module.ts



import { OverlayModule } from "@angular/cdk/overlay";

@NgModule({
  declarations: [ ],
  imports: [ OverlayModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora, se tiene un botón que despliega información para configuración. A este se le debe agregar una directiva que proporciona el paquete Overlay.

directiva: cdk-overlay-origin || overlay-origin || cdkOverlayOrigin

Como se quiere que el panel esté asociado al botón, éste deberá asignarse a la directiva que se ha declarado. Esto es justo para linkear el panel al botón.



#menuOverlay="cdkOverlayOrigin"

Directiva aplicada a un elemento para que se pueda utilizar como origen de una Superposición mediante una ConnectedPositionStrategy.

El Overlay, necesita saber cuándo desplegar el panel y cuando ocultarlo. Para esto, se ha de utilizar el evento (click) del botón. Y En el TS también se debe meter esa prop.



// HTML
(click)="isOpen = !isOpen" // => a cada click cambia el estado de isOpen

// TS
isOpen = false; // => Estado inicial



<button 
    type="button" 
    class="flex rounded-full" 
    aria-expanded="false" 
    type="button" 
    (click)="isOpen = !isOpen"
  cdkOverlayOrigin 
    #menuOverlay="cdkOverlayOrigin"
>
    <img class="w-8 h-8 rounded-full" src="https://api.lorem.space/image/face?w=400&h=400" alt="user photo" />
</button>

Hasta este punto, ya se tiene un origen dónde debe aparecer el panel flotante. Ahora, es necesario indicar qué es lo que se debe mostrar dentro de ese overlay.

En algún lugar del template, hay que colocar un <ng-template> </ng-template> Este contendrá el contenido a mostrar.

Deberá tener otra directiva del paquete:

cdk-connected-overlay || connected-overlay || cdkConnectedOverlay

Con las siguientes props de la directiva, se indica cuál es el overlay con cuál conecta y que dispara la acción de mostrar el panel flotante.



//"menuOverlay" es la var de referencia creada en el botón => #menuOverlay
[cdkConnectedOverlayOrigin]="menuOverlay"

También, se debe indicar cuál es la prop condicionante o boolean que dice si se debe o no mostrar el panel. En este caso es el boolen que se ha definido en el TS



[cdkConnectedOverlayOpen]="isOpen"



<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="menuOverlay" [cdkConnectedOverlayOpen]="isOpen">

  <div class="z-50 my-4 w-60 text-base list-none bg-white rounded divide-y divide-gray-100 shadow">
    <div class="py-3 px-4 flex justify-between">
      <span class="block text-sm text-center text-gray-900">Account</span>
      <button (click)="isOpen = !isOpen" class="block text-sm text-gray-900">
        <fa-icon [icon]="faClose"></fa-icon>
      </button>
    </div>
    <div class="py-3 px-4 flex items-center space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://api.lorem.space/image/face?w=400&h=400" alt="" />
      <div class="space-y-1">
        <div>Jese Leos</div>
        <div class="text-sm text-gray-500">nico@gmail.com</div>
      </div>
    </div>
    <ul class="py-1">
      <li>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">Profile</a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">Activity</a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">Cards</a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">Settings</a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">Sign out</a>
      </li>
    </ul>
    <ul class="py-1">
      <li>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700">Log out</a>
      </li>
    </ul>
  </div>

</ng-template>

Esto lo aprendí en platzi. Curso de Maquetación con Angular CDK y Tailwind CSS
https://platzi.com/cursos/angular-tailwind/

SetInput en Angular

Daniel Mezagini — Sat, 14 May 2022 19:36:58 +0000

Cuando queremos ejecutar cierta acción al recibir cierta propiedad en el componente, he utilizado el ciclo de vida OnChanges. Pero esto supone evaluar todos y cada uno de los cambios que suceden y tener que verificar si el cambio entrante es el que estamos esperando.

Este método corre cada que un Input() recibe información del componente padre.

Ej. Espero un objeto tipo Persona. Pero no quiero que se evalúe cada cambio. Sólo saber cuando se hace el cambio al recibir person.

@Input() person: Person = new Person('', '', 0, 0, 0); 
@Input() year: number = 0;
@Input() month: number = 0;
@Input() lastName: string = '';

Esto se soluciona con SetInput. Requiere separar el person del input().

person: Person = new Person('', '', 0, 0, 0);

Al Input() se le agrega el set de los setters. Para que siempre que llegue información al Input() se ejecute el método set. De esa manera se mantiene controlado el cambio de person.

person: Person = new Person('', '', 0, 0, 0);

@Input()
  set changePerson(newPerson: Person) {
    this.person = newPerson;
  }

Parámetros opcionales y nullish coalescing en Typescript

Daniel Mezagini — Sat, 16 Apr 2022 22:26:00 +0000

Los parámetros opcionales siempre deben ir al final

función con parámetros obligatorios:

export const someFunction = (param1: string, param2: number, param3?: boolean) => {

  return {
    param1,
    param2: param2 ?? 10,
    param3: param3 ?? false
  }

}

También está en uso el nullish coalesing. (??). Que es “si param viene null o undefined asigna este valor que pongo a la derecha.

Es importante destacar que los valores que se aplicarían en caso de ir null o undefined, no sucederá para el param2. Porque es un dato de entrada obligatorio, y ese mismo dato es el que tendrá salida.

A excepción del param3. Ese puede quedar indefinido. Y sí aplicaría el nullish coalesing.

Otra manera de definir una función con parámetros opcionales:

export const otherSomeFunction = (param1: string, param2: number = 23, param3: boolean = false) => {

  return {
    param1,
    param2,
    param3
  }

En caso que no se proporcione datos para las props param2 y param3 se asignará el valor por defecto que se les está colocando.

quizá te preguntarás si puedes usar || en lugar de ?? para retornar un valor por defecto en caso que la variable esté nula o indefinida. La respuesta es NO.

?? ⇒ se aplicará la instrucción en caso de que el espacio en memoria sea null o undefined.

|| ⇒ se aplicará la instrucción en caso de que el espacio en memoria sea 0, ‘’, false, undefined, null.

Notas del Curso de Typescript: Tipos Avanzados y Funciones - @Platzi

Deja de usar el tipo de dato Any en Typescript

Daniel Mezagini — Sat, 16 Apr 2022 20:25:34 +0000

Cuando utilizamos Typescript es para: tener un constante análisis del código que vamos desarrollando, tener un tipado fuerte, trabajar con un lenguaje de alto nivel, disminuir la cantidad de bugs que solemos generar.

Pero en el transcurso del tiempo en desarrollo de lo que estamos creando, nos encontramos en ocasiones con la necesidad o comodidad de colocar tipos any a variables. Y esto desactiva esa funcionalidad tan querida de TS de estar verificando nuestro código; vuelves a estar trabajando con JS puro cuando se trata de esa variable y lo dejas vulnerable a bugs.

Hoy aprendí que es mejor utilizar el type unknown a usar any. Y este es el por qué...

Cuando declaras una variable de tipo any. Puedes asignarle cualquier valor de cualquier tipo.



let anyVar: any;
anyVar = true;
anyVar = undefined;
anyVar = null;
anyVar = 1;
anyVar = 'vale';
anyVar = [];
anyVar = {};

Esa variable será tratada como si de JS puro se tratara.

Ej. Si anyVar almacena un texto. Puedes ejecutar un toUpperCase() en el momento que desees sin que te salte alguna alerta. (porque estás trabajando con JS tal cuál). El problema es que si deseas ejecutar un método doSomething() que es un método inexistente, tampoco saltará un error, porque no se verificará ese código.

Aquí entra la alternativa a usar para evitar esto y prevenir futuros bugs.

Unknown Type

Este tipo de dato también puede inicializarse con datos de cualquier tipo.



let unknownVar: unknown;
unknownVar = true;
unknownVar = undefined;
unknownVar = null;
unknownVar = 1;
unknownVar = 'vale';
unknownVar = [];
unknownVar = {};

Sin embargo, cuando quieras tratar un tipo Unknown type con cualquier otro, tendrás que verificarlo primero antes de poder usarlo o te saltarán alertas.

Ej. toUpperCase() es un método de string. Pero al ser de tipo unknown. No puedes tratarlo como string sin antes una verificación de tipo. Cosa que con any no pediría, simplemente intentaría ejecutar ese método a ciegas, y a expectativa de que sí sea un string.

Ahora, el método doSomething tampoco existe. Por lo que nos marca un error. Cosa que no sucede si fuera de tipo any. Intentaría ejecutarlo aunque no existe y eso ocasionaría un error en tiempo de ejecución.

Entonces, ¿cómo ejecutar el método toUpperCase()?

Tenemos que verificar que sí es un string el tipo de dato que contiene la variable unknown



if (typeof unknownVar === 'string') {
    unknownVar.toUpperCase();
}

Se verifica con la función typeof y dentro de ese scope se podrá ejecutar la función, sin problema alguno.

Usar el tipo unknown nos ayuda a minimizar futuros errores, siempre obligándonos a verificar que el tipo de dato que contiene dentro esa variable unknown es del tipo de dato como queremos tratarla.

Siempre que puedas evitar usar any, hazlo.

Notas del Curso de Typescript: Tipos Avanzados y Funciones - @Platzi

Deploy Angular App a IIS

Daniel Mezagini — Sat, 05 Jun 2021 00:17:37 +0000

Preparar entorno para el deploy

Instalar URL Rewrite:

Link de descarga

Agregar Nuevo Sitio Web

Aparecerá la siguiente pantalla:

Coloca el nombre del sitio
La ruta donde se almacenarán los archivos de la publicación del proyecto
Y por último, el puerto. Y "Aceptar"

Agregar Aplicación

Saldrá la siguiente pantalla

Colocas el Alias
La ruta de acceso al directorio donde irán los archivos de la publicación del proyecto.
Por último, "Aceptar"

Deberás ver tu sitio y tu aplicación:

Si ya se realizó la instalación del URL Rewrite. Deberá verse la opción dentro del Administrador IIS:

Ahora el entorno está listo.

Preparar el proyecto Angular y hacer el Deploy a IIS

Dentro del directorio src debe crear un archivo web.config Que resolverá las rutas de la APP.

web.config



<configuration>
  <system.webServer>
    <rewrite>
      <rules>
      <clear /> <!-- Imperative Step, otherwise IIS will throw err -->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

imagen de referencia

Ese mismo archivo, deberá ir en el build de la app. Por lo que hay que indicarlo. Esto se hace dentro del archivo angular.json dentro del arreglo de assets:[]



"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config"
]

Generar build de la aplicación

En este caso, se hace un build para usar en el entorno de producción. Pero también puede ser para desarrollo.

Muy importante indicar la subcarpeta donde éste estará alojado con el flag --base-href. También hay que destacar que debe colocarse el nombre de la aplicación que está dentro del sitio que se creó al inicio. En la sección de preparación del entorno para el deploy. En este caso, la app se le llamó "NuevoProyecto"

producción



ng build --configuration=production --base-href "/NuevoProyecto/"

Al ejecutar el comando genera la carpeta dist y dentro otro directorio con el nombre del proyecto. Y dentro el publish que irá en el directorio que se creó al preparar el entorno en IIS.

Copiar los archivos que están en el dist y guardar en /nuevo-sitio



📂 C:
├─ 📂 inetpub
     ├─ 📂 wwwroot
          ├─ 📂 nuevo-sitio

En IIS levantar el servicio del sitio:

Después de eso, abrir la app.

Imagen de portada, de tommy pixel en Pixabay

Observables | Definición, Declaración y Uso, Básico

Daniel Mezagini — Mon, 22 Mar 2021 09:30:53 +0000

Todo RxJS se basa en Observables.

Definición:

Es un objeto que puede emitir valores. Puede no emitir, emitir sólo uno, o emitir N cantidad de valores.

Declaración:



const obs$ = new Observable<string>();

obs$ - Contiene un signo $ de pesos al final. Indica que la variable es un observable.

Observable<string>(); - Se crea una instancia de Observable, donde entre signos mayor y menor viene el tipo de dato devuelto en el observable. Entre los signos < > se especifica qué es lo que está fluyendo dentro del Observable. Pueden ser textos, numeros, modelos, clases, estructuras de datos, etc. Es muy importante definir qué tipo de dato fluye en el Observable.

Emisión de valores

Esto lo hacemos a través de la función next().



const obs$ = new Observable<string>(subs => {

    subs.next("Hola");
    subs.next("Mundo");

});

obs$.subscribe(console.log);

Salida

subs.next() - Emisión de información.

En el ejemplo, se hacen 2 emisiones a los subscriptores. "Hola" y "Mundo" que son textos.

Las emisiones se realizan siempre y cuando haya al menos un subscriber.

complete()

Este método hará que se detenga la emisión de información. Cada next() después del método complete(), ya no será emitido.



import { Observable } from 'rxjs';

// const obs$ = Observable.create(); También se puede crear así.

const obs$ = new Observable<string>(subs => {

    subs.next("Hola");
    subs.next("Mundo");

    subs.complete();

    subs.next("Cruel");

});

obs$.subscribe(console.log);

En este ejemplo, la salida seguirá siendo la misma. La emisión después del complete() se omitirá.

Imagen de Luisella Planeta Leoni en Pixabay

Promesas - Ejemplo Básico

Daniel Mezagini — Sat, 23 Jan 2021 17:06:37 +0000

Las promesas son utilizadas cuando se deben ejecutar tareas a destiempo o cuando se necesita ejecutar algo después de que una tarea suceda o algún procedimiento

Cuando declaras una nueva promesa, se debe indicar al menos el callback que se quiere ejecutar con la promesa.

Nuestra promesa

console.log('Inicio del Init');

    const promesa = new Promise(resolve => {
      resolve('Hola World');
    });

    promesa.then( res => {
      console.log(`Se imprimió el ${res}`)
    });

    console.log('Fin del init');

Le estamos diciendo, si la promesa se ejecuta correctamente, llama a resolve.

res - se recibe el resolve de la promesa en el then.

¿Cómo interactuamos con la promesa?

Tenemos que suscribirnos a ella. Eso lo hacemos con uno de los tres métodos que vienen con ella. catch(), finally() y then.

then() - Método que contendrá instrucciones a ejecutar en caso de que la promesa se ejecute con éxito.

catch() - Método que contendrá instrucciones a ejecutar en caso de que la promesa haya tenido un error.

fnally() - Método que contendrá instrucciones a ejecutar sin importar si la promesa tuvo éxito o error. Siempre se ejecutará esta parte.

Si se ejecuta el código anterior, tenemos el siguiente resultado:

1- Inicio del Init
2- Fin del init
3- Se imprimió el Hola World

Ejemplo manejando el error:


    console.log('Inicio del Init');

    const promesa = new Promise((resolve, reject) => {

      if (true) // coloca false para ejecutar el .catch()
      {
        resolve('Hola World');
      }
      else
      {
        reject('algo salió mal');
      }
    });

    promesa.then( res => {
      console.log(`Se imprimió el ${res}`)
    })
    .catch(error => console.log('Error en la promesa: ', error));

    console.log('Fin del init');

  }

Configurar CORS - ASP net core

Daniel Mezagini — Tue, 12 Jan 2021 06:10:49 +0000

Configurar CORS

Debido a que se debe interactuar desde el navegador a la API, la API cuenta con seguridad de tal manera que no dejará que otra dirección interactúe con el WS. Es por esa razón que debe configurarse el CORS.

Backend

Esta configuración se realiza en la clase **Startup**.

Declaras una variable sólo de lectura, al inicio de la clase:

public class Startup
{
    readonly string MiCors = "MiCors";
        ...
        ...
}

Lo siguiente, es agregar la configuración del servicio en el método **ConfigureServices**:

services.AddCors(options =>
{
      options.AddPolicy(name: MiCors,
                        builder =>
                        {
                                builder.WithMethods("*");
                                builder.WithHeaders("*");
                            builder.WithOrigins("*");
                        });
});

**builder.WithOrigins("*"); -** Es donde se le indica al CORS qué dirección tendrá interacción con el WS. Si se deja el asterisco como tal, permitirá la conexión de cualquier dirección.

Por último es necesario agregar el **app.Use**, esto al final de las instrucciones:

app.UseRouting();

app.UseCors(MiCors);

app.UseAuthorization();

startup

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using Microsoft.OpenApi.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using WSVenta.models;

namespace WSVenta
{
    public class Startup
    {
        readonly string MiCors = "MiCors";
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy(name: MiCors,
                                  builder =>
                                  {
                                      builder.WithOrigins("*");
                                  });
            });
            services.AddDbContext<VentaRealContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

            services.AddControllers();
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "WSVenta", Version = "v1" });
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "WSVenta v1"));
            }

            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseCors(MiCors);

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}

Servidor Básico en Node.js

Daniel Mezagini — Thu, 17 Dec 2020 20:51:51 +0000

Levantar un servidor en Node

Instalaciones necesarias:

Node -

Node.js

En node se trabaja todo el proyecto como si fuera un paquete en sí mismo, con npm init.

Posicionado dentro de la carpeta del proyecto, ejecuta el comando en la consola:

npm init

En este punto se requerirá cierta información para el proyecto. Después de llenarla se creará automáticamente un archivo con extensión .json en la raíz del directorio del proyecto.

|- package.json

Añade el archivo server.js a la carpeta raíz. Quedando así el directorio

| - package.json
| - server.js

Para tener un buen servidor en NodeJS hay que utilizar la librería express una de las mejores para tener un servidor.

Instalación de express en el proyecto:

npm i express

Traer el paquete de express al archivo principal.

server.js

const express = require('express');

Iniciar express:

var app = express();

Verificar que ya está funcionando:

app.use('/', function (req, res){
    res.send('Hola');
});

Poner a escuchar servidor:

app.listen(3000);
console.log('La app está escuchando en http://localhost:3000');

Nuestro archivo server.js está de la siguiente manera:

// Se importa módulo express
const express = require('express');

// Inicializa express
var app = express();

// Rutas
app.use('/', function (req, res){
    res.send('Hola');
});

// Escuchar server
app.listen(3000);
console.log('La app está escuchando en http://localhost:3000');

Ahora, sólo resta levantar el serv.

// Ejecuta en la consola

node server

TypeScript - Asersiones de tipo

Daniel Mezagini — Tue, 26 May 2020 07:19:30 +0000

Tipo: Aserciones de Tipo

Cuando el dev conoce más que el compilador de TS es necesario un mecanismo que permita hacer una conversión de tipos de datos. En tal caso le estamos diciendo al compilador "confía en mi, sé lo que estoy haciendo".

Usa dos sintaxis:
<Angle Bracket> : dentro debemos definir un tipo
(variable as tipo)

Se parece al casting de otros lenguajes de programación de alto nivel. Pero este no tiene ningún impacto a nivel de ejecución.

Caso práctico:
Tenemos una variable de tipo any a la que le asignamos un texto.

let username: any;
username = 'anbreaker';

Creamos otra variable con tipo string, a la que le asignamos el texto que contiene username . Pero para poder asignarlo debe cumplir una condición; que el texto sea mayor a 5 caracteres. ¿Cómo lo sacaremos?

Debido a que username es de tipo any no podemos usar la función .length. Así que debemos decirle a TS que trate la variable como si tuviera el tipo string. Esto se llama hacer una "Aserción de tipos"

let message: string =
  (<string>username).length > 5 ? `Welcome ${username}` : `username is too short`;
console.log('Message ->', message);

La otra manera que pudo hacerse la aserción fue:
(username as string).length

Si utilizas Typescript con ReactJS asegurate de usar el tipo de asersión con as. Esto porque hay conflicto con JSX al usar la forma <tipo>variable

Estas notas fueron tomadas al realizar el curso de Platzi - Curso de Fundamentos de TypeScript