DEV Community: Jorge Soares

Entendendo o Padrão RRULE do iCalendar com JavaScript

Jorge Soares — Wed, 18 Sep 2024 18:56:14 +0000

Fala pessoas, tudo bem?

Hoje vamos mergulhar em um assunto que pode parecer meio obscuro à primeira vista, mas que é super útil quando falamos de agendas e calendários: o padrão RRULE do iCalendar. E, claro, vamos ver como podemos aplicar isso usando JavaScript.

O que é o iCalendar e o RRULE?

Vamos começar do começo: o que é esse tal de iCalendar? O iCalendar, também conhecido como RFC 5545, é um padrão para o intercâmbio de dados de calendário e agendamento. Em outras palavras, é uma forma padronizada de representar eventos, tarefas, informações de disponibilidade, etc., de modo que diferentes sistemas possam entender e processar essas informações.

Isso permite que aplicativos como Google Calendar, Apple Calendar, Outlook e muitos outros possam importar e exportar eventos e agendas sem que você tenha que fazer nenhum malabarismo.

Por que o iCalendar é importante?

Interoperabilidade: Como é um padrão amplamente adotado, usar o iCalendar garante que sua aplicação possa se comunicar com uma variedade de outros sistemas e serviços.
Padronização: Evita a necessidade de criar formatos proprietários ou customizados para lidar com dados de calendário.
Flexibilidade: Suporta uma ampla gama de funcionalidades, desde eventos simples até regras complexas de recorrência.

Onde entra o RRULE?

O que torna o iCalendar realmente poderoso é a capacidade de definir regras de recorrência usando o RRULE (Recurrence Rule). Isso permite que você especifique eventos que se repetem de acordo com padrões específicos, como “toda segunda quarta-feira do mês” ou “a cada dois dias”.

Imagina que você está criando uma aplicação de agenda e quer que ela seja compatível com outros serviços. Usar o RRULE garante que as regras de recorrência que você define serão entendidas por outros sistemas que também suportam o iCalendar.

Além disso, lidar com eventos recorrentes manualmente pode ser um pesadelo. O RRULE simplifica isso ao permitir que você defina uma regra que gera todas as ocorrências para você.

Como funciona o RRULE?

O RRULE é basicamente uma string que segue um formato específico para descrever a recorrência. Por exemplo:

FREQ=DAILY;COUNT=5

Isso significa que o evento se repete diariamente por 5 vezes.

Principais parâmetros do RRULE:

FREQ: Frequência da recorrência (DAILY, WEEKLY, MONTHLY, YEARLY)
INTERVAL: Intervalo entre as recorrências
COUNT: Número total de ocorrências
UNTIL: Data final da recorrência
BYDAY: Dias da semana em que o evento ocorre
BYMONTHDAY: Dias do mês em que o evento ocorre
BYMONTH: Meses em que o evento ocorre

Exemplos de RRULE

# Evento semanal às segundas e quartas por 10 ocorrências:
FREQ=WEEKLY;BYDAY=MO,WE;COUNT=10

# Evento anual no dia 25 de dezembro até 2025:
FREQ=YEARLY;BYMONTH=12;BYMONTHDAY=25;UNTIL=20251225T000000Z

Usando o RRULE com JavaScript

Agora, vamos ver como podemos manipular o RRULE em uma aplicação JavaScript. Para isso, podemos usar bibliotecas como a rrule.js.

Instalando a biblioteca

Se você estiver usando Node.js, pode instalar com:

npm install rrule

Exemplo Prático

Digamos que queremos criar um evento que ocorre toda terça e quinta às 10h, pelos próximos 2 meses.

const { RRule } = require('rrule');

// Definindo a regra
const rule = new RRule({
  freq: RRule.WEEKLY,
  interval: 1,
  byweekday: [RRule.TU, RRule.TH],
  dtstart: new Date(Date.UTC(2023, 9, 17, 10, 0, 0)),
  until: new Date(Date.UTC(2023, 11, 17, 10, 0, 0))
});

// Obtendo as datas das ocorrências
const dates = rule.all();

console.log(dates);

Esse código vai gerar todas as datas em que o evento ocorre, respeitando a regra que definimos.

Convertendo para String RRULE

Se você precisar da string RRULE para, por exemplo, salvar no banco de dados ou enviar para outro serviço, pode fazer:

const rruleString = rule.toString();
console.log(rruleString);

Isso vai retornar algo como:

RRULE:FREQ=WEEKLY;INTERVAL=1;BYDAY=TU,TH;UNTIL=20231217T100000Z

Interpretando uma String RRULE

Se você receber uma string RRULE e quiser interpretá-la em JavaScript, também é possível:

const { RRule } = require('rrule');

const rruleString = 'FREQ=DAILY;COUNT=5';

const rule = RRule.fromString(rruleString);

const dates = rule.all();

console.log(dates);

Integrando com outros Serviços

Uma vez que você tem a string RRULE, pode integrá-la com APIs que suportam o iCalendar. Por exemplo, ao criar um evento no Google Calendar via API, você pode incluir a regra de recorrência.

Exemplo com Google Calendar API

const event = {
  summary: 'Reunião Semanal',
  start: {
    dateTime: '2023-10-01T10:00:00-03:00',
  },
  end: {
    dateTime: '2023-10-01T11:00:00-03:00',
  },
  recurrence: [
    'RRULE:FREQ=WEEKLY;BYDAY=MO,WE,FR;UNTIL=20231231T235959Z'
  ],
};

// Código para inserir o evento usando a API do Google Calendar

Considerações Finais

Compreender o padrão iCalendar e, em especial, o RRULE, é um passo fundamental para quem desenvolve aplicações que lidam com calendários e agendamento. Além de facilitar a interoperabilidade entre diferentes sistemas, você oferece aos usuários uma experiência mais consistente e integrada.

Ao incorporar o RRULE em suas aplicações JavaScript, você não apenas simplifica o gerenciamento de eventos recorrentes, mas também garante que suas soluções sejam escaláveis e compatíveis com padrões amplamente aceitos no mercado.

Seja você um desenvolvedor iniciante ou experiente, explorar e dominar esses padrões pode abrir portas para projetos mais complexos e interessantes.

Links de Referência

Espero que este artigo tenha ajudado a esclarecer o uso do RRULE no iCalendar. Se tiver alguma dúvida ou sugestão, fique à vontade para deixar um comentário!

Até a próxima! 👋

Usando Robo3t (robomongo) no Ubuntu 23.04

Jorge Soares — Fri, 13 Oct 2023 12:21:36 +0000

Criei um script para conseguir usar o Robo3T (legado) no Ubuntu, pois estava enfrentado problemas com o Studio 3t.

Vou postar aqui apenas para guardar isso para o futuro.

wget https://github.com/Studio3T/robomongo/releases/download/v1.4.4/robo3t-1.4.4-linux-x86_64-e6ac9ec.tar.gz
sudo wget https://dashboard.snapcraft.io/site_media/appmedia/2018/09/logo-256x256.png -O /opt/robo3t-1.4.4-linux-x86_64-e6ac9ec/icon.png
sudo tar -xzf robo3t-1.4.4-linux-x86_64-e6ac9ec.tar.gz -C /opt
rm robo3t-1.4.4-linux-x86_64-e6ac9ec.tar.gz
sudo mkdir /opt/robo3t-1.4.4-linux-x86_64-e6ac9ec/lib/BKP/
sudo mv /opt/robo3t-1.4.4-linux-x86_64-e6ac9ec/lib/libstdc++* /opt/robo3t-1.4.4-linux-x86_64-e6ac9ec/lib/BKP/
sudo ln -s /opt/robo3t-1.4.4-linux-x86_64-e6ac9ec/bin/robo3t /usr/bin/robo3t
cat > ~/.local/share/applications/robo3t.desktop <<EOL
[Desktop Entry]
Encoding=UTF-8
Name=Robo3T
Icon=/opt/robo3t-1.4.4-linux-x86_64-e6ac9ec/icon.png
Exec=robo3t
Terminal=false
Type=Application
Categories=Development;
EOL

Configurando o OpenVPN 2.4.7 no Ubuntu 23.04

Jorge Soares — Tue, 10 Oct 2023 18:35:27 +0000

Olá, pessoal! Hoje vou compartilhar um método eficaz para configurar o OpenVPN 2.4.7 no Ubuntu 20.04. Vamos lá? 😄

Instalação Manual

Desinstalando a versão atual do OpenVPN (se instalada):

sudo apt remove OpenVPN

2. Instalando o binário libssl1.1:

Acesse o link
Baixe o arquivo libssl1.1_1.1.1f-1ubuntu2.12_amd64.deb na seção "Downloadable files"
Dê um duplo clique no arquivo e abra com o Software Install (GUI)

3. Instalando o OpenVPN 2.4.7:

Acesse o link
Baixe o arquivo openvpn_2.4.7-1ubuntu2.20.04.4_amd64.deb na seção "Downloadable files"
Dê um duplo clique no arquivo e abra com o Software Install (GUI)

4. Reinstalando o NetworkManager OpenVPN GUI:

sudo apt install network-manager-openvpn-gnome

Nota: As etapas 1 e 4 devem ser executadas como um comando no terminal. Isso requer que você tenha as permissões adequadas e deve conhecer o nome de usuário e senha da sua máquina local.

Além disso, para as etapas 2 e 3, após baixar os pacotes .deb, você pode dar um duplo clique neles no Nautilus/gerenciador de arquivos e selecionar "Software Install" como a opção necessária para abrir o pacote.

Por último, mas não menos importante, é fundamental seguir estas etapas na ordem em que são apresentadas, caso contrário, o processo falhará.

Espero que este guia tenha sido útil para você. Fique à vontade para compartilhar suas experiências nos comentários abaixo e até a próxima! 😊

Este artigo foi baseado em uma resposta no Stackoverflow que pode ser encontrada aqui https://askubuntu.com/a/1406472
traduzido para o português.

Artigo editado pelo ChatGPT

Nota: Update
Pra facilitar fiz um script para não precisar fazer manualmente esse processo

sudo apt remove openvpn -y
curl -O https://launchpad.net/~ubuntu-security-proposed/+archive/ubuntu/ppa/+build/23493657/+files/openvpn_2.4.7-1ubuntu2.20.04.4_amd64.deb
sudo dpkg -i openvpn_2.4.7-1ubuntu2.20.04.4_amd64.deb
rm openvpn_2.4.7-1ubuntu2.20.04.4_amd64.deb
sudo apt install network-manager-openvpn-gnome  -y

Nginx, SSL e mTLS: Um Guia Prático para Criar um Ambiente mais seguro

Jorge Soares — Mon, 25 Sep 2023 17:28:11 +0000

Olaaaaaa pessoas, muito boa tarde/manhã/noite, espero que vocês estejam bem.

Trilha sonora enquanto eu escrevia esse artigo:

https://open.spotify.com/intl-pt/track/5dpDnd3Nnw5dRql80RcI7M?si=41eec3a4d5eb45e9

Neste artigo, vamos fornecer um combo de informações. Aprenderemos desde a configuração de um servidor HTTPS usando o Nginx, passando pela criação de um certificado autoassinado e, por fim, configuraremos o mesmo servidor para ser um Mutual TLS ou apenas mTLS.

Nota: Nesta primeira parte, aprenderemos como configurar um ambiente HTTPS usando o Nginx.

Para este tutorial, estou usando o Docker com o Docker Compose para orquestrar nosso ambiente local, facilitando assim o processo de configuração do ambiente. Afinal, em 2023, ninguém mais configura um servidor Nginx diretamente na máquina.

Configurando o ambiente

Começaremos criando nosso diretório de projeto:



mkdir projeto-mtls

Dentro da pasta, criaremos um arquivo docker-compose.yaml e uma pasta nginx que conterá tudo relacionado ao nosso servidor:



cd projeto-mtls
touch docker-compose.yaml # Arquivo do ambiente docker nosso.
mkdir nginx # Pasta que vai guardar tudo relacionado ao nginx
mkdir nginx/certs # Pasta que vai guardar nossos certificados.

Feito isso, agora começaremos a configurar nosso servidor.

Vamos criar um arquivo nginx.conf:



touch nginx.conf

Nele, configuraremos um servidor "simples" que retornará uma página HTML quando acessado em http://localhost:



server {
    listen 80;
    server_name localhost;

    location / {
        default_type text/html;
        return 200 "<!DOCTYPE html><h2>Hello World!</h2>\n";
    }
}

Agora, para testarmos se tudo está funcionando, configuraremos nosso docker-compose.yaml da seguinte forma:



version: "3.8"
services:
  nginx:
    container_name: proxy-mtls
    restart: always
    image: nginx
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
      - ./nginx/certs:/etc/nginx/certs
    ports:
      - "80:80"
      - "443:443"
    networks:
      - sandbox

networks:
  sandbox:
    driver: bridge

Mapearemos a pasta nginx para dentro do container, para que as configurações e certificados sejam acessíveis no servidor:



docker-compose up # Inicializa os containers do Docker Compose.

Com o servidor ativo, acesse http://localhost:

Configurando o SSL

Agora que temos nosso servidor HTTP, precisamos configurar o SSL para começarmos a usar HTTPS nas requisições.

Para isso, precisamos gerar um certificado autoassinado.

Nota: Um certificado digital normalmente requer uma autoridade de certificação (CA) para validar sua autenticidade. No entanto, em casos de desenvolvimento, podemos atuar como a própria CA e assinar nosso próprio certificado, conhecido como "certificado autoassinado". Esse tipo de certificado não é válido em produção, mas é suficiente para ambientes de desenvolvimento.

Gerando a chave privada do certificado

Para gerar nosso certificado, usaremos o utilitário OpenSSL, amplamente utilizado para criptografia e segurança. Utilizaremos o comando a seguir para gerar uma chave privada:



openssl genpkey -algorithm RSA -out certs/localhost.key

Este comando utiliza o algoritmo RSA, amplamente empregado em sistemas de segurança, como SSL/TLS, para criptografar comunicações na web. O resultado será salvo em certs/localhost.key.

Gerando a Solicitação de Assinatura de Certificado (CSR)

Agora, usaremos o OpenSSL para gerar uma Solicitação de Assinatura de Certificado (CSR):



openssl req -new -key certs/localhost.key -out certs/localhost.csr

Essa solicitação contém informações necessárias para emitir nosso certificado. Informamos a chave privada a ser usada (certs/localhost.key) e o arquivo de saída (certs/localhost.csr).

Ao executar esse comando, você precisará fornecer várias informações sobre a autoridade do certificado e detalhes de contato, que serão enviados à CA para autenticar o certificado da empresa.

Dica bonus sobre geração de CSR

Ver dica

Se você precisa gerar vários certificados ou deseja ter um "modelo" para facilitar a geração de certificados no futuro, pode criar um arquivo de configuração contendo configurações padrão. Isso agilizará o processo de geração de certificados.

Vamos criar um arquivo chamado template.csr.conf para ser nosso modelo:



touch template.csr.conf

Dentro deste arquivo, colocaremos as seguintes informações:



[req]
default_bits = 2048
default_keyfile = localhost.key
distinguished_name = req_distinguished_name
req_extensions = req_ext
x509_extensions = v3_ca
req_extensions = v3_req

[req_distinguished_name]
countryName = Country Name (2 letter code)
countryName_default = BR
stateOrProvinceName = State or Province Name (full name)
stateOrProvinceName_default = Sao Paulo
localityName = Locality Name (eg, city)
localityName_default = Sao Paulo
organizationName = Organization Name (eg, company)
organizationName_default = Localhost Ltda
organizationalUnitName = organizationalunit
organizationalUnitName_default = Development
commonName = Common Name (e.g. server FQDN or YOUR name)
commonName_default = localhost
commonName_max = 64

[req_ext]
subjectAltName = @alt_names

[v3_ca]
subjectAltName = @alt_names

[v3_req]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = 127.0.0.1
DNS.2 = localhost

Nota: Eu não vou explicar aqui detalhes sobre esse arquivo, mas um ponto legal é que você pode configurar vários endereços no [alt_names] para que esse certificado suporte vários dominios.

Agora, execute o comando novamente, mas desta vez passando o arquivo de configuração:



openssl req -new -key certs/localhost.key -out certs/localhost.csr -config template.csr.conf

Observe que, mesmo pedindo que você preencha informações, os dados pré-definidos são os que definimos no nosso modelo, economizando tempo durante o processo.

Gerando o Certificado Autoassinado

Após criar a chave privada e a solicitação de assinatura de certificado, chegou a hora de atuar como CA e assinar o certificado. Use o seguinte comando:



openssl x509 -req -days 365 -in certs/localhost.csr -signkey certs/localhost.key -out  certs/localhost.crt

Este comando gera o certificado a partir da solicitação de assinatura de certificado (CSR). O certificado terá validade de 1 ano e será salvo em certs/localhost.crt.

Entenda o comando: x509 é usado para manipular certificados digitais. -req indica que estamos trabalhando com uma solicitação de assinatura de certificado. -days 365 define a validade do certificado em 1 ano. Os próximos três argumentos (-in, -signkey, -out) especificam o caminho da solicitação de assinatura de certificado, da chave privada e do arquivo de saída.

Testando o SSL

Após gerar o certificado, precisamos testá-lo. Para isso, faremos algumas alterações no nosso arquivo nginx.conf para indicar o uso de HTTPS em vez de HTTP:



server {
    listen 80;
    server_name localhost;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name localhost;

    ssl_certificate /etc/nginx/certs/localhost.crt;
    ssl_certificate_key /etc/nginx/certs/localhost.key;

    location / {
        default_type text/html;
        return 200 "<!DOCTYPE html><h2>Hello World with HTTPS</h2>\n";
    }
}

Agora, qualquer requisição para http://localhost será redirecionada para https://localhost. Observe que estamos usando os atributos ssl_certificate e ssl_certificate_key para apontar o certificado e a chave do nosso servidor.

Salve as alterações e reinicie o servidor:



docker-compose down
docker-compose up

Ao acessar https://localhost, você receberá um aviso do navegador informando que o certificado de autoridade é inválido.

Isso é esperado, uma vez que nós mesmos assinamos o certificado. Para continuar, clique em "Avançado" e depois em "Prosseguir para localhost (não seguro)".

Pronto, agora temos nosso servidor HTTPS funcionando:

Até este ponto, já temos um servidor HTTPS funcionando perfeitamente. Agora, vamos para a parte do Mutual TLS ou mTLS.

Fechando as Portas com mTLS

Nota: O mTLS, ou Mutual Transport Layer Security, é uma extensão do protocolo TLS que autentica tanto o cliente quanto o servidor durante a comunicação na internet. Isso é feito por meio da troca de certificados digitais, onde cada parte verifica a identidade da outra. Esse nível adicional de autenticação reforça a segurança da comunicação, especialmente em ambientes sensíveis à segurança, como serviços bancários online e sistemas corporativos, protegendo contra ataques de intermediários mal-intencionados e garantindo uma conexão confiável e criptografada.

Para começar, criaremos um certificado para o cliente, seguindo os mesmos passos que fizemos para criar o certificado do servidor:



mkdir nginx/certs/clients # Vai guardar o certificado do nosso cliente



openssl genpkey -algorithm RSA -out certs/clients/certificado-do-cliente.key
openssl req -new -key certs/clients/certificado-do-cliente.key -out certs/clients/certificado-do-cliente.csr -config template.csr.conf
openssl x509 -req -days 365 -in certs/clients/certificado-do-cliente.csr -signkey certs/clients/certificado-do-cliente.key -out  certs/clients/certificado-do-cliente.crt

Após gerar o certificado do cliente, precisaremos configurar nosso servidor Nginx para trabalhar com mTLS. Para isso, faremos algumas atualizações em nosso arquivo de configuração:




server {
    listen 443 ssl;
    server_name localhost;

    ssl_certificate /etc/nginx/certs/localhost.crt;
    ssl_certificate_key /etc/nginx/certs/localhost.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384';

    ssl_client_certificate /etc/nginx/certs/clients/certificado-do-cliente.crt;
    ssl_verify_client on;

    location / {
        default_type text/html;
        return 200 "<!DOCTYPE html><h2>Hello World Secury</h2>\n";
    }
}

Agora, adicionamos algumas configurações adicionais ao nosso proxy. ssl_client_certificate especifica o certificado do cliente (que o cliente deve usar ao fazer chamadas para o nosso serviço), e ssl_verify_client ativa a verificação.

Com essa pequena mudança, garantimos que apenas o cliente que possua este certificado conseguirá fazer requisições para nosso ambiente.

Requisições sem o certificado resultarão em um erro:

Agora, ao passar o certificado na requisição, a chamada será bem-sucedida:

Considerações finais

Espero que este artigo seja útil para quem deseja estudar configurações de ambientes e segurança.

Até a próxima.

Se tiver alguma dúvida ou comentário, deixe-os aqui, e vamos compartilhar conhecimento.

Draw.io + PlantUML - Como tornar mais fácil o processo de documentação

Jorge Soares — Wed, 01 Feb 2023 12:11:15 +0000

Nota pessoal: A trilha sonora que ouvi enquanto escrevia esse artigo.
https://open.spotify.com/playlist/0n81ha8dSdYLDVc8VpCPsd?si=70347c8542f44a84


Resumo: Nesse artigo, você vai entender um pouco sobre o que é UML, também o que é diagrama de sequencia e por fim veremos um exemplo de como utilizar a ferramenta plantUML junto com o Draw.io para facilitar nossas documentações

Fala pessoal, a documentação é uma parte fundamental de todo projeto de desenvolvimento, embora nem sempre seja fácil ou divertida.

Recentemente, descobri que o draw.io possui uma integração com o plantUML, que pode ser muito útil na criação de Diagramas UML.

Por isso, resolvi escrever esse artigo para começar uma série sobre como facilitar a documentação de projetos.

Mas antes de continuar, vamos dar alguns passos para trás e entender um pouco mais sobre o que é UML.

A UML (do inglês Unified Modeling Language) é a Linguagem de Modelagem Unificada, é uma linguagem-padrão para a elaboração da estrutura de projetos de software.

É adequada para a modelagem de sistemas, incluindo sistemas corporativos, aplicações baseadas na web e sistemas complexos embutidos em tempo real.

A UML é uma linguagem expressiva que cobre todas as visões necessárias ao desenvolvimento e implantação de sistemas de software complexos.

Em resumo, UML é um padrão de escrita para criar diagramas, que tem como objetivo ajudar na documentação e no entendimento das regras de negócio de um projeto no futuro.

É importante notar que um modelo UML e um diagrama UML são coisas diferentes, o segundo é uma representação gráfica do primeiro.

Eu adoro ver coisas representadas visualmente, é mais fácil entender um processo ou regra de negócio na minha opinião, quanto mais claro, menos complicado será a hora de colocarmos a ideia em prática.

Mas conceitos a parte vamos para a parte mais prática.

Na animação abaixo eu mostro um exemplo bem simples de criação de "fluxo" de autenticação no draw.io, onde o usuário faz o login e logo em seguida ele mostra a tela de boas vindas.

Como nós podemos representar esse fluxo utilizando um diagrama de sequencia?

Nota: O diagrama de sequência é uma ferramenta visual que mostra como diferentes componentes de um sistema se relacionam e comunicam entre si ao longo do tempo. Ele ajuda a entender o fluxo de mensagens entre objetos ou componentes, mostrando quem envia a mensagem, quem a recebe e em que ordem isso acontece. É uma forma simples de ilustrar a ordem de eventos em um processo, e pode ser útil para esclarecer dúvidas sobre a lógica de um sistema ou de um negócio. É como um mapa mental que ajuda a visualizar o funcionamento de algo e a identificar pontos onde pode haver melhorias. Em resumo, o diagrama de sequência é uma ferramenta eficaz para ajudar a compreender o funcionamento de um sistema de maneira visual e fácil de entender.

A imagem abaixo representa como seria esse mesmo fluxo porém em um diagrama de Sequencia perceba que ele é mais detalhado mostrando como que o sistema deve se comportar para que o login do usuário aconteça apesar de ser um diagrama de sequencia ainda é superficial pois nesse caso não informamos quais as informações que devem ser encaminhadas de um ponto ao outro.

Agora na imagem abaixo vemos esse mesmo diagrama, porém um pouco mais especificado onde nós conseguimos saber quais os métodos que serão executados em cada momento e quais informações eles devem passar

Por exemplo observando a imagem a cima, eu sei que caso no passo 6 não retorne um usuário ( User === null ) ele deve acusar um erro e com isso chamar o metodo HTTPResponse que irá encaminhar uma resposta com código 401, e a mensagem "credencial inválida" para a tela de login.

Perceba que dessa forma a pessoa que for realizar o desenvolvimento desse fluxo consegue de forma clara saber o que está acontecendo.

Nota pessoal: Eu particularmente não gosto de chegar nesse nível de detalhamento, pois na 'vida real' o código é vivo e se altera muito, então acaba tornado obsoleto esse nível de detalhamento muito rápido, e o trade-off começa a ficar caro para manter atualizado a documentação.

Pois bem, depois dessa breve explicação da idéia de diagrama de sequência, vamos voltar ao draw.io e como nós podemos construir diagramas de forma simples e rápida nele.

Para isso iremos usar o PlantUML

Nota: O PlantUML é uma ferramenta de geração de diagramas UML (Unified Modeling Language) baseada em texto. É uma forma simples e fácil de representar diagramas UML usando uma sintaxe de marcação simples, e permite a geração automática de diagramas a partir do código. Além de suportar diagramas de classes, sequência, casos de uso, estados, objetos e componentes, PlantUML também suporta vários outros diagramas técnicos e de negócios, tornando-se uma ferramenta versátil e útil para modelagem de sistemas e processos.

Para acessar o PlantUML dentro do draw.io siga os seguintes passos:

No menu superior vá na opção Arrange
Logo em seguida Insert
Depois Advanced
e por vim Clique em PlantUML

Ao fazer isso irá abrir uma janela com um exemplo de diagrama, clique em "Insert"

Feito isso será renderizado aquele exemplo de diagrama dentro do draw.io.

Para editar basta clicar duas vezes sobre a imagem e a janela para edição irá abrir novamente.

Coloque o trecho de código abaixo na janela de edição e clique em "Apply"

@startuml
autonumber

actor       Usuario        as User
boundary    Login          as Login
control     Servidor       as System
database    Banco_de_Dados as DB


User -> Login : document.ready()
Login -> Login : valida_login()

alt user.access_token !== null
    Login -[#green]x Login: redirect()
    note right: Redireciona o usuário para tela de login    
end

User -> Login: autenticar(email: string, senha: string)
Login -> System : usuario_controladora(email: string, senha: string): User
System -> DB: buscar_usuario(email: string, senha: string): User

alt User === null
    rnote over System #FFAAAA: Usuário não foi encontrado\ne deve retornar uma mensagem\nde erro para o usuário.
    DB -[#red]> System: new Error("Usuário não encontrado")
    System -[#red]x Login: HTTPResponse(401, "Credencial inválida")
else
    DB --[#green]> System:
    System -[#green]> Login: HTTPResponse(200, "Usuário lgoado com sucesso")
    note over Login: Usuário deve ser redirecionado para tela de Boas vindas
    Login -[#green]x Login: redirect()
end

@enduml

O resultado que você terá é o diagrama que foi mostrado ali em cima 😉

Nesse caso o PlantUML serve quase que como uma linguagem de marcação que facilita e MUITO criarmos diagramas com um custo de manutenção muito menor, afinal por ser uma "linguagem" conseguimos editar e utilizar sua sintaxe ao nosso favor.

Dica bonus:

Existem várias extensões que você pode usar no seu editor de código favorito que ajuda na hora de escrever as descrições no PlantUML como por exemplo para o VSCode encontrei esse aqui que permite você visualizar uma preview em tempo real enquanto você está escrevendo e caso queira também utilizar o Draw.io dentro do VSCode você pode utilizando esse plugin aqui

Material de apoio:
https://plantuml.com/sequence-diagram
https://plantuml.com/faq
https://en.wikipedia.org/wiki/PlantUML
https://pt.wikipedia.org/wiki/Diagrama_de_sequ%C3%AAncia
https://www.lucidchart.com/pages/pt/o-que-e-uml
https://pt.wikipedia.org/wiki/UML
https://abapinho.com/2017/09/plantuml-finalmente-o-uml-da-para-usar/

Keycloak 19.0.1 + Mysql + Docker - Configuração simples de um docker-compose.yaml

Jorge Soares — Fri, 29 Jul 2022 20:33:39 +0000

Oi Pessoal, para configurar uma imagem simples do Keycloak com Mysql vou deixar um exemplo de docker-compose.yaml para facilitar a vida de vocês

docker-compose.yaml



version: '3'

services:
  db:
    container_name: db_mysql
    image: mysql:latest
    environment:
      - MYSQL_ROOT_PASSWORD=root_pwd
      - MYSQL_USER=admin
      - MYSQL_PASSWORD=pa55word
    ports:
      - "3306:3306"
    volumes:
      - .docker/db/mysql:/var/lib/mysql
  keycloak:
    container_name: keycloak
    image: quay.io/keycloak/keycloak:19.0.1
    environment:
      - KEYCLOAK_ADMIN=admin
      - KEYCLOAK_ADMIN_PASSWORD=admin
      - KC_DB=mysql
      - KC_DB_USERNAME=admin
      - KC_DB_PASSWORD=pa55word
      - KC_DB_URL_HOST=db
      - KC_DB_URL_PORT=3306
      - KC_DB_SCHEMA=keycloak
    ports:
      - 8080:8080
    command: start-dev
    depends_on:
      - db

Ao subir a imagem do mysql crie um banco chamado keycloak ele será usado pelo container do Keycloak para salvar as configurações do sistema.

Caso na primeira vez que subir os containers der o seguinte erro no container do Keycloak Unknown database 'keycloak' significa que o keycloak tentou acessar o schema mas ele ainda não tinha sido criado.

Nesse caso só certifique-se de ter criado o schema no Mysql e rode novamente.

Se tudo der certo, conseguirá acessar http://localhost:8080/ e agora é só se divertir desbravando.

Javascript - Prototypes

Jorge Soares — Fri, 26 Feb 2021 11:44:13 +0000

Muito provavelmente você já deve ter ouvido falar em algum lugar que "Tudo no javascript é objeto!", mas por que isso ?

Isso se dá porque praticamente tudo dentro do javascript tem descendência do Object e com isso possuem todos os métodos herdados de Object.prototype.

Mas afinal o que é esse prototype?

O prototype é um objeto que possui um conjunto de métodos que são originais de um tipo, por exemplo o map() ou toString(), que mesmo você não declarando eles na criação da sua variável, ao se deparar com um Array por exemplo eles existem, isso acontece porque quando você declara uma nova variável, você herda as funções do prototype dela.

Exemplo:

const arr = [1, 2, 3];

arr.forEach(() => { });
arr.map(() => { });
arr.hasOwnProperty(0);

Você pode perceber que mesmo não declarando essas funções forEach ou map na criação do nosso Array mesmo assim elas existem, isso porque essas funções são herdadas do Array.prototype; Mas ao olhar dentro do Array.prototype ainda não encontramos o método hasOwnProperty, mas então porque mesmo assim ele existe?

Ele existe porque temos algo chamado Prototype Chain que é o encadeamento de protótipos até o Objeto original.

Quando se trata de herança, o JavaScript tem somente um construtor: objetos. Cada objeto tem um link interno para um outro objeto chamado prototype. Esse objeto prototype também tem um atributo prototype, e assim por diante até o que o valor null seja encontrado como sendo o seu prototype. null que, por definição, não tem prototype, e age como um link final nesta cadeia de protótipos (MDN Web Docs - Herança e cadeia de protótipos (prototype chain))

De forma prática, ao declarar nossa variável arr no exemplo acima nós informamos que o tipo dela é Array, e com isso temos os métodos nativos do Array, que tem um link através do atributo __proto__ para o tipo Object.

// Exemplificando
const arr = [];
arr.__proto__.forEach();
arr.__proto__.__proto__.hasOwnProperty();
// nosso objeto -> prototype do array -> prototype do object.

Quando usamos o método hasOwnProperty internamente o javascript começa procurar na primeira cadeia de protótipo da nossa variável, ao não encontrar, ele sobe um degrau nessa cadeia, e assim de forma subsequente, até ele encontrar o método ou chegar no tipo primário, se ao chegar no tipo primário ele ainda não encontrar, então é retornado null

const arr = [];

function findFunction (obj, property) { 
    if(obj[property]) return obj[property];
    if(!obj.__proto__) return null;
    findFunction(obj.__proto__, property);
}

findFunction(arr, 'hasOwnProperty')
// arr.hasOwnProperty  - na nossa declaração existe ?
// arr.__proto__.hasOwnProperty - No tipo array existe ?
// arr.__proto__.__proto__.hasOwnProperty - No tipo Object existe ? 
// Se na cadeia acima não existir, então ele retorna null, pois o object é o tipo primário.

"Ah OK, Jorge eu entendi, mas como eu posso tirar proveito do prototype" ?

Existem vários exemplos na internet mostrando como manipular o prototype de uma função que você criou, como exemplo "Carro" ou o clássico exemplo de animais, mas o que eu vou trazer para vocês é um exemplo de manipulação de um Tipo de variável já existente. O que eu mais gosto é o toCapitalize, que não existe nativamente no tipo String, e em nenhum outro, porém muitas vezes precisamos adicionar um capitalize pelo javascript em algum lugar.

Então como funcionaria isso ?

String.prototype.toCapitalize = function () { 
    const words = this.split(' ');
    return words.map((word) => {
        const firstLetter = word[0].toUpperCase();
        const otherLetters = word.substr(1).toLowerCase();
        return `${firstLetter}${otherLetters}`;
    }).join(' ')
}

Simples assim, você cria uma novo método que vai ser vinculado a todos os tipos String do seu código de forma global. (sem que você precise sempre redeclarar essa função);

Mas como eu utilizo?

Ao criar uma variável do tipo array, ela já vai possuir esse método nativamente, daí é só chama-lo da forma abaixo:

"estou no dev.to".toCapitalize()
// Estou No Dev.to

Com esse exemplo, conseguimos ver uma forma "turbinamos" os tipos nativos do Javascript.

!! ATENÇÃO !!

Apesar de ter dado esse exemplo de manipulação de um tipo nativo, tenha muito cuidado, manipular ou sobrescrever métodos de tipo nativos como Array, String, Number etc..., pode gerar confusão na cabeça dos outros desenvolvedores que fizerem parte do projeto que você está implementando. Então, lembre sempre de documentar de forma clara essas mudanças para não ter problemas no futuro.

Espero ter ajudado a esclarecer um pouco mais sobre os mistérios desse mundo do Javascript.

Até a próxima

Referências

Docker - Comandos do docker congelando como resolver?

Jorge Soares — Tue, 22 Dec 2020 18:23:33 +0000

Recentemente eu venho passando por alguns problemas de Congelamento do docker, o que signfica, que ele simplesmente trava.

A melhor solução que encontrei para resolve esse problema foi apagar todas as imagens e containers do computador.

No meu caso como uso o Linux, resolvi o problema com os seguintes comandos.

sudo rm -rf /var/lib/containerd
sudo rm -rf /var/lib/docker

É uma solução rádical, porém foi a unica que funcionou no meu caso; pois nenhum comando do docker estava respondendo. Inclusive tentei executar o stop do serviço do docker no computador, e também não obtive
uma solução.

Eu espero que de alguma forma possa ajudar vocês.

Até uma próxima !

GCloud + Docker problema de unauthorized

Jorge Soares — Sun, 18 Oct 2020 15:35:20 +0000

unauthorized: You don't have the needed permissions to perform this operation, and you may have invalid credentials. To authenticate your request, follow the steps in: https://cloud.google.com/container-registry/docs/advanced-authentication

Eu estava com problema para fazer deploy para o Google Container.
Por algum motivo meu Docker no Windows não estava conseguindo se conectar ao GCloud para fazer o push das imagens.

Depois de tentar de várias formas, a solução prática e rápida que encontrei foi usar esse comando.

gcloud docker -- pull gcr.io/image:tag

Documentação: https://cloud.google.com/sdk/gcloud/reference/docker

Ao rodar esse comando, ele usa as credenciais do Gcloud para se autenticar com o docker e fazer tanto o Push quanto o Pull das imagens.

Javascript - Promise ou Observable

Jorge Soares — Sun, 16 Aug 2020 01:52:23 +0000

Existem dois termos que são aplicados quando falamos desses conceitos; Eles são, Eager e Lazy ( ansioso e preguiçoso ) e a principal diferença entre os dois, são respectivamente as definições desse termos.

Como assim? Vou explicar logo abaixo.

Eager & Lazy

Vamos começar com o seguinte exemplo de Promise

const greetingEager = new Promise((resolve, reject) => { 
    console.log('Dentro da promise as coisas acontecem de forma anciosa.');
    resolve('Olá, Prazer em te conhece.');
})

greetingEager.then( res => console.log('Saudação na Promisse: ' + res ));

No exemplo acima conseguimos ver como ela é ansiosa, porque ao declarar a Promise o conteudo dela já é executado imediatamente, sem mesmo esperar ser invocada através do then.

Se você executar esse código acima verá que a mensagem do console.log dentro da Promise é executada antes mesmo de você chamar o then da função.

Ao contrário de um Observer, que por essência é preguiçoso.

//https://rxjs-dev.firebaseapp.com/guide/overview
const { Observable } = rxjs;

const greetingLazy = new Observable(observer => {
  console.log('Dentro de um observer as coisas acontecem de forma preguiçosa.');
  observer.next('Olá, fique a vontade.');
  observer.complete();
});

console.log('Antes de começar inscreva-se no Observer');

greetingLazy.subscribe({
  next: console.log,
  complete: () => console.log('Fim da conversa.')
});

Quando você cria um Observable, você precisa fornecer uma função de retorno de chamada através do atributo next, que será invocada sempre que for executado o next dentro do observer.

Para entender um pouco mais sobre isso, tem um post sobre Generator que pode te ajudar.

No exemplo acima a mensagem "Antes de começar inscreva-se no Observer" vai aparecer antes do console.log de dentro do Observable.

Um exemplo seria um cenário onde você quer obter uma informação sobre o cardápio de um restaurante. A promise, seria um menu na sua mesa. onde ao chegar o menu já está disponível para você. Enquanto o Observable, o menu só irá vir até você quando você pedir para um garçom trazer.

Sync & Async

Uma outra diferença é o tipo de execução um observable pode ser síncrono ou assíncrono dependendo do contexto, enquanto a Promise sempre vai ser assíncrona, mesmo que seja resolvida imediatamente após sua execução.


const greeting = new Promise((resolve, reject) => { 
    resolve('Olá, prazer em te conhecer.')
})

console.log('Antes de chamar a Promise')

greeting.then(res => console.log('Saudação da Promisse: ' + res ));

console.log("Depois de chamar o then na Promise provando que ela inicia sempre de maneira assíncrona.")

No exemplo acima, apesar da execução dessa promise ser imediata, você vai perceber ao rodar o código, que a mensagem de dentro da Promise aparecerá por ultimo. Isso porque uma vez que é declarada a Promise a chamada dela é adicionada a fila de microtasks, ela será só executada no fim da microtask atual.

const { Observable } = rxjs;

const greeting = new Observable(observer => {
  observer.next('Olá, Estou muito feliz em ver você');
  observer.complete();
});

console.log('Antes de chamar o subscribe do Observable');

greeting.subscribe({
  next: console.log,
  complete: () => console.log('Fim da saudação')
});

console.log('Depois de chamar o subscribe do Observable, provando que ele pode ser executado de forma síncrona')

No exemplo a cima, a ordem das mensagem serão mantidas. por seguir uma ordem de processos de execução de tasks.

Porém, podemos executar coisas dentro do Observable de forma assíncrona também, como no código a seguir.

const tiredGreeting = new Observable(observer => {
    setTimeout(() => {
      observer.next('Ah, hey, prazer em te conhecer');
      observer.complete();
    }, 2000);
});

console.log('Antes de chamar o subscribe do Observable');

tiredGreeting.subscribe({
    next: console.log,
    complete: () => console.log('Fim da saudação')
});

console.log('Depois de chamar o subscribe do Observable, provando que ele pode ser executado de forma assíncrona')

Valores

Um Observable pode emitir vários valores/resultados para enquanto estiver inscrito.

Enquanto a Promise retorna apenas um resultado, independente de quantas vezes você chame aquela mesma promise.

const { Observable } = rxjs;

const notifications$ = new Observable(observer => {
  const interval = setInterval(() => {
    observer.next('Nova Noticia.');
  }, 2000);

  return () => clearInterval(interval);
});

const subscription = notifications$.subscribe(console.log);

setTimeout(() => subscription.unsubscribe(), 8000);

No exemplo de cima, enquanto não há uma desinscrição do Observable, ele ficará emitindo valores.

Como no exemplo do restaurante. A Promise é o menu, ele sempre estará lá, da mesma forma. Enquanto no observable, toda vez que chega alguém novo, o Garçom pode chegar com o Menu, ou com outra informação ao cliente que ele achar relevante.

Recapitulando.

Promise são ansiosas, enquanto Observable são preguiçosos.
Promise sempre são assíncronas, enquanto Observable pode ser tanto síncronas quanto assíncronas.
Promise sempre retornam o mesmo valor, enquanto Observable pode retornar um fluxo de valores, de nenhum a vários.

Nota de rodapé

O Observable, pode ser aprimorado usando outras ferramentas dentro do RxJS, para tornar ele ainda mais poderoso, conseguindo definir fluxos sobre medida.

Nota de tradução

Esse texto é uma adaptação do texto original JavaScript Theory: Promise vs Observable em Inglês no Medium.

Javascript - Entendendo Generators em 3 Minutos

Jorge Soares — Thu, 09 Jul 2020 02:05:11 +0000

Geralmente não se fala tanto sobre o generators. Isso ocorre porque existem poucos cenários em que você realmente deseja usá-lo.

No entanto, isso não nega a utilidade do recurso - porque quando esses cenários acabam surgindo, você ficará feliz em ter o generator em seu currículo.

Como a maioria das coisas em programação, o generator é apenas uma ferramenta; Nesse caso, uma ferramenta especializada.

Vamos dar uma olhada em um exemplo de generator em ação e percorrer cada etapa e ver como está funcionando:

function* firstGenerator(range){ 
    let i = 0;
    while(i < range) { 
        i+= 1;
        yield i;
    }
}

Aqui está um generator definido.
Você perceberá que é muito semelhante a uma função normal, exceto pelo fato de termos um * e yield.
O * informa ao JavaScript que esta é uma função geradora.

Discutiremos o yield em um minuto.

Primeiro, vamos mostrar um exemplo do gerador em ação:

let iterator = firstGenerator(3)
iterator // Object [Generator] {}
iterator.next() // { value: 1, done: false }       
iterator.next() // { value: 2, done: false }       
iterator.next() // { value: 3, done: false }       
iterator.next() // { value: undefined, done: true }

Nosso firstGenerator retornou um iterator, dando acesso a um próximo método.

Cada vez que chamamos o next, nossa função executará o código até encontrar uma declaração de rendimento (yield). Quando encontramos uma declaração de rendimento, interromperemos a execução até que a próxima seja chamada novamente. Quando o someGenerator terminar a execução, na próxima vez que chamarmos next, Nós receberemos um objeto que tenha uma chave done com um valor definido como true.

Bem maneiro né?

Bem, o retorno do iterator realmente nos permite fazer mais do que apenas isso.
Também temos acesso a instruções como for… of, bem como a outros métodos de iteração, como o operador spread:

let iterator2 = firstGenerator(3);
for( const item of iterator2 ) { 
    console.log(item)
}

Agora que sabemos o básico sobre o uso de geradores, vamos ver alguns casos de uso.

Um caso de uso comum seria manter o estado de um gerador de ID baseado em um índice.

Digamos que temos um map/object de itens e queremos expor uma função que permita que um usuário
adicione um item a esse mapa, cada item deve ter um ID exclusivo com base na ordem que foi inserido.

Podemos gerar essa instrução de Geração de IDs usando generators

function* idGenerator(){ 
    let i = 0;
    while(true) { 
        i += 1;
        yield `id-${i}`
    }
}

const ourItems = {};
const ourIdGenerator = idGenerator();

function addItem(item) {
    const id = ourIdGenerator.next()
    ourItems[id] = { id, item }
}

addItem('valor a ser guardado')

Outro exemplo seria abstrair o UX Flow em uma única função.

Esse exemplo é de longe o que eu mais gosto.
- Nota do tradutor

Imagine que temos um design de UX; Um usuário clica em um botão, depois fazemos alguns cálculos; depois que os cálculos terminam, queremos mostrar outro botão; depois de clicar nesse botão, fazemos mais alguns cálculos e então atualizamos a janela.

Poderíamos colocar tudo isso em uma única função, mas pode ficar bem confuso.

Em vez disso, como sabemos a ordem na qual nosso design flui, podemos usar generators:

function* UXDesignFlow(){ 
    yield showFirstButton();
    yield showSecondButton();
    yield window.location.reload();
}


function mainApp() { 
    const uxIterator = UXDesignFlow();

    uxIterator.next();
    firstButton.on('click', () => uxIterator.next() )
    secondButton.on('click', () => uxIterator.next() )
}

No exemplo acima, isolamos com êxito nosso fluxo de design e nossa lógica.
Isso facilita o teste, a legibilidade e, consequentemente, a manutenção.

Cada vez que concluímos nossos cálculos, mostramos a próxima etapa na interface do usuário.

Conclusão

Na maioria das vezes você não vai precisar de geradores, mas, quando precisa ficará feliz em ter isso na sua stack, Ele ajuda a abstrair interações e fornecem uma solução limpa para quando é necessário uma execução mais lenta dos valores solicitados.

Conclusão do Tradutor.

Esse artigo é uma tradução quase que direta do Artigo Original em inglês no medium.

Javascript - Entendendo o toLocaleDateString

Jorge Soares — Tue, 24 Mar 2020 02:58:08 +0000

Fala pessoal, a um tempo atrás descobri uma coisa bem legal do Javascript e queria compartilhar com vocês.

Quem usa o moment ou então outra lib apenas para dar aquela formatada básica, para o padrão da sua região, tem um jeito que é bem simples, e extremamente leve, que é usando uma função nativa da Classe Date, que é o toLocaleDateString

const locale = 'pt-br'
new Date('03-22-2020').toLocaleDateString(locale)
// 22/03/2020

const option = { weekday: 'long'}
const locale = 'pt-br'
new Date().toLocaleDateString( locale, option)
// domingo

Um exemplo completo de uso para o uso dessa função seria algo mais ou menos assim:

const option = {
    year: 'numeric',
    month: ('long' || 'short' || 'numeric'),
    weekday: ('long' || 'short'),
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    era: ('long' || 'short'),
    timeZoneName: ('long' || 'short')
}
const locale = 'pt-br'
new Date().toLocaleDateString( locale, option)
// domingo, 22 de março de 2020 depois de Cristo 18:56:20 Horário Padrão de Brasília

Só com isso já conseguimos perceber a força que essa função tem na hora de fazer a formatação de uma data não é mesmo ?

Se eu quisesse passar para a linguagem americana, russa, ou de qualquer outra região do mundo; Apenas trocando o locale, já estaria retornando na lingua.

const option = {
    year: 'numeric',
    month: 'long',
    weekday: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    era: 'long',
    timeZoneName: 'long'
}

// Português Brasil
new Date().toLocaleDateString( 'pt-br', option)
// domingo, 22 de março de 2020 depois de Cristo 18:56:20 Horário Padrão de Brasília

// Africano
new Date().toLocaleDateString( 'af', option)
// 'Maandag 23 Maart 2020 na Christus 22:30:43 Brasilia-standaardtyd'

// Arabe - Libia
new Date().toLocaleDateString( 'ar-ly', option)
// 'الاثنين، 23 مارس 2020 ميلادي 10:31:46 م توقيت برازيليا الرسمي'

// Alemão - Alemanha
new Date().toLocaleDateString( 'de-de', option)
'Montag, 23. März 2020 n. Chr., 22:33:09 Brasília-Normalzeit'

Vou deixar no fim do artigo um link para a lista de Localidades que você pode usar.

Agora queria detalhar um pouco mais o uso de alguns atributos dentro das opções disponíveis, até para entender o quão poderoso é essa função;

Além dos parametros básicos que fazem a formatação de uma data:

let options = {     
    second: ('numeric' || '2-digit'), 
    minute: ('numeric' || '2-digit'),
    hour: ('numeric' || '2-digit'), 
    day: ('numeric' || '2-digit'), 
    weekday: ('narrow' || 'long' || 'short'),
    month: ('narrow' || 'long' || 'numeric' || '2-digit' || 'short'),
    year: ('numeric' || '2-digit'),
    era: ('short' || 'long'),
    timeZoneName: ('long' || 'short')2
}
new Date().toLocaleDateString('pt-br', options)

Temos alguns alias para facilitar a formação de datas sem precisar passar essa quantidade imensa de parametros acima.

let options = {     
    dateStyle: ('full' || 'long' || 'medium' || 'short' ), 
    timeStyle: ('full' || 'long' || 'medium' || 'short' ), 
}
new Date().toLocaleDateString('pt-br', options)

// new Date().toLocaleDateString('pt-Br',{ dateStyle: 'full' } )
// "domingo, 22 de março de 2020"
// new Date().toLocaleDateString('pt-Br',{ dateStyle: 'long' } )
// "22 de março de 2020"
// new Date().toLocaleDateString('pt-Br',{ dateStyle: 'medium' } )
// "22 de mar. de 2020"
// new Date().toLocaleDateString('pt-Br',{ dateStyle: 'short' } )
// "22/03/2020"

// new Date().toLocaleDateString('pt-Br',{ timeStyle: 'full' } )
// "20:55:24 Horário Padrão de Brasília"
// new Date().toLocaleDateString('pt-Br',{ timeStyle: 'long' } )
// "20:55:29 BRT"
// new Date().toLocaleDateString('pt-Br',{ timeStyle: 'medium' } )
// "20:55:33"
// new Date().toLocaleDateString('pt-Br',{ timeStyle: 'short' } )
// "20:55"

Agora os casos mais especificos, porém podem dar uma configuração maior a String são:

let options = {
    timeZone: 'America/Sao_Paulo', // Lista de Timezones no fim do artigo
    hour12: true, // Alterna entre a mostragem dos horários em 24 horas, ou então AM/PM
}
new Date().toLocaleDateString('pt-br', options)

O Parametro de hourCycle é usada para "Ajustar" a forma que é contado o relógio em determinado lugar, por exemplo:

O h23 significa que o dia, vai até as 23h59m depois muda para 00h00m, já o h24 significa que o dia, vai até as 24h59 depois muda para 01h00m

Segue abaixo uma tabela simples para ajudar vocês

Ciclo de horas	Descrição
h12	O Sistema usado de horas é 1-12, correspondido pelo 'h' no padrão; Um relógio de 12 horas, com a meia noite iniciando as 12:00 am
h23	O Sistema usado de horas é 0-23, correspondido pelo 'H' no padrão; Um relógio de 24 horas, com a meia noite iniciando as 00:00 am
h24	O Sistema usado de horas é 1-24, correspondido pelo 'k' no padrão; Um relógio de 24 horas, com a meia noite iniciando as 24:00 am
h11	O Sistema usado de horas é 0-11, correspondido pelo 'K' no padrão; Um relógio de 12 horas, com a meia noite iniciando as 00:00 am

let options = {
    hourCycle: 'h23'
}
new Date().toLocaleDateString('pt-br', options)

^{^{Informações mais detalhadas sobre o hourCycle}}

Confesso que não entendi muito bem o funcionamento do parametro formatMatcher, porém vou deixar ele registrado aqui, quem conseguir me explicar o conceito dele, e compartilhar com o pessoal, eu agradeço

let options = {
    formatMatcher: ('basic' || 'best-fit') // best-fit é o formato default.
}
new Date().toLocaleDateString('pt-br', options)

Considerações Finais.

Pessoal, esse é o meu primeiro texto um pouco mais técnico, tentando detalhar o funcionamento de alguma coisa.
A ideia é que com o tempo eu consiga explicar de forma melhor, e claro aprender junto com vocês;

Espero que de alguma forma esse artigo venha a ajudar outras pessoas, que assim como eu, estão em busca de conhecimento direto.

Até a próxima,

Vou deixar aqui abaixo, alguns links que usei como referencia, pra quem quiser buscar mais informações sobre algum dos assuntos que falei

Referencias

Lista de Código de Localidade
Lista de Timezones
I Can Use
Stack Overflow - How to Format a Javascript Date