DEV Community: Beatriz813

Utilização do RabbitMQ para cenários de roteamento complexo.

Beatriz813 — Sun, 01 Oct 2023 12:20:32 +0000

Ao ler a documentação ou posts que falam sobre o caso de uso do RabbitMQ, sempre lemos que ele é uma ótima opção para cenários de roteamento de mensagem, mas por que ele é a melhor opção?

Este fato se dá pelos artifícios de roteamento que o Rabbit oferece, que são as exchanges e os bindings. As exchanges são entidades para onde as mensagens são enviadas e então roteadas para uma fila de acordo com as regras especificadas nos bindings (vinculação entre a exchange e a fila) dessas exchanges. Dessa forma ele se torna a ferramenta mais adequada para o roteamento de mensagens, porque assim essa lógica de direcionamento é retirada da aplicação e é atribuída para o Rabbit.

Figura 1 — Utilização de exchange do tipo headers

A figura acima descreve o seguinte exemplo: dado um sistema de abertura de chamados, um cliente pode abrir um chamado relacionado a uma categoria de problema — pagamento, pedido ou técnico.
Porém, as regras de roteamento para cada fila acontece da seguinte forma:

De acordo com a categoria do problema (pagamento, pedido ou técnico).
Se a equipe de pedidos tiver menos de três agentes disponíveis, as mensagens de problemas de pedidos devem ser encaminhadas para a equipe de suporte técnico. Se a equipe de suporte de pagamentos tiver menos de dois agentes disponíveis, as mensagens de problemas de pagamento devem ser encaminhadas para a equipe de suporte técnico.

Para este cenário poderia ser usado outro broker, como o Apache Kafka por exemplo, mas essa decisão traria essa complexidade de roteamento para dentro da aplicação. Optando pelo RabbitMQ a aplicação só terá a responsabilidade de informar para a exchange a categoria do problema e a quantidade de funcionários disponíveis em cada setor. E assim a exchange se encarregará da distribuição das mensagens de acordo com as regras configuradas nos bindings.

Kubernetes - Variáveis de ambiente

Beatriz813 — Sat, 24 Sep 2022 20:44:50 +0000

Declarando as variáveis diretamente no aquivo yml do Pod:

apiVersion: v1
kind: Pod
metadata:
  name: db-noticias
  labels:
    app: db-noticias
spec:
  containers:
    - name: db-noticias-container
      image: aluracursos/mysql-db:1
      ports:
        - containerPort: 3306
      env:
        - name: "MYSQL_ROOT_PASSWORD"
          value: "q1w2e3r4"
        - name: "MYSQL_DATABASE"
          value: "empresa"
        - name: "MYSQL_PASSWORD"
          value: "q1w2e3r4"

Criando um serviço de configMap:

apiVersion: v1
kind: ConfigMap
metadata:
  name: db-configmap
data:
  MYSQL_ROOT_PASSWORD: q1w2e3r4
  MYSQL_DATABASE: empresa
  MYSQL_PASSWORD: q1w2e3r4

Primeira forma de vincular o pod com as variáveis do configMap:

apiVersion: v1
kind: Pod
metadata:
  name: db-noticias
  labels:
    app: db-noticias
spec:
  containers:
    - name: db-noticias-container
      image: aluracursos/mysql-db:1
      ports:
        - containerPort: 3306
      env:
        - name: MYSQL_ROOT_PASSWORD
          valueFrom:
            configMapKeyRef:
              name: db-configmap
              key: MYSQL_ROOT_PASSWORD

Segunda forma de vincular o pod com as variáveis do configMap, copiando todas as variáveis definidas no configMap:

apiVersion: v1
kind: Pod
metadata:
  name: db-noticias
  labels:
    app: db-noticias
spec:
  containers:
    - name: db-noticias-container
      image: aluracursos/mysql-db:1
      ports:
        - containerPort: 3306
      envFrom:
        - configMapRef:
            name: db-configmap

Aplicando Sessões em Asp.Net Core

Beatriz813 — Sun, 06 Mar 2022 04:48:48 +0000

O que são sessões?

Tendo em vista duas aplicações Cliente e Servidor que se comunicam através do protocolo HTTP e sabendo que este não mantém estado, a utilização de sessões são uma forma de armazenar os dados voláteis sobre o acesso de um usuário.

Uma sessão é criada para um navegador, cada uma é identificada por um id de sessão que é mandado para o front que o armazena em um cookie e o utiliza para enviar a cada requisição que faz para o back, desta forma a aplicação do lado servidor é capaz de recuperar os dados da sessão.

Como utilizar sessões no Asp.Net Core

Quando criamos um projeto de API ou MVC com asp.net core temos acesso à propriedade HttpContext que guarda todas as informações sobre o acesso que está sendo feito como dados sobre: Session, Request, Response entre outros.

Porém para persistir dados na Session é preciso habilitar a sua aplicação para que guarde sessão através do uso de cache distribuído e utilizando a DI e o middleware de sessão.

Passo a Passso

Adicionando as configurações do cache distribuído, nesse caso será usado o redis. Para utilizar esse métodos de extensão AddStackExchangeRedisCache() precisamos adicionar o pacote Microsoft.Extensions.Caching.StackExchangeRedis

builder.Services.AddStackExchangeRedisCache(opt =>
{
    opt.ConfigurationOptions = new ConfigurationOptions {
        EndPoints = { "localhost" },
        Password = "teste",
        User = "beatriz" 
    };
    opt.InstanceName = "CacheDistributed";
});

Adicionando configurações sobre a sessão

builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromSeconds(10);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

Adicionando o middleware de sessão à pipeline do app.

Obs.: Deve estar nesta ordem de chamada antes de MapControllers()

app.UseHttpsRedirection();

app.UseAuthorization();
app.UseSession();
app.MapControllers();

app.Run();

Após isso podemos utilizar o HttpContext.Session. Código do SessaoController.cs

[ApiController]
    [Route("sessao")]
    public class SessaoController : ControllerBase
    {
        [HttpGet]
        public IActionResult SetSession ([FromQuery] string nome)
        {
            HttpContext.Session.Set("nome", Encoding.UTF8.GetBytes(nome));

            return Ok();
        }

       [HttpGet("listar")]
       public IActionResult GetSession ()
        {
           var n = Encoding.UTF8.GetString(HttpContext.Session.Get("nome") ?? new byte[0]);
            return Ok(new { nome = n });
        }

    }

Aplicação funcionando

Armazenando um valor na sessão.

Consultando o valor armazenado na sessão

Observabilidade em APIs ASP.NET core

Beatriz813 — Tue, 27 Jul 2021 01:41:47 +0000

Ferramentas utilizadas:

Asp.Net core 3.1
prometheus-net
InfluxDB
Grafana

Introdução

Para este tutorial será construído apenas uma API com Asp.net core que contém um controller, ou seja, o foco aqui é sobre como adicionar um coletor de métricas na sua API. Neste tutorial todas as ferramentas serão instaladas localmente sem uso de Docker.

InfluxDB

O InfluxDB é um banco de dados (TSDB) usado para armazenar registros onde a data e hora em que eles foram armazenados são relevantes para algum tipo de análise. Portanto, o InfluxDB é usado para armazenar métricas de servidor, monitoramento de desempenho de aplicativos, dados de rede, dados de sensores, eventos, negociações em um mercado e outros tipos de dados analíticos. Ele possui uma linguagem própria chamada Influx que se utiliza do paradigma funcional e oferece várias funções para manipular e analisar dados.
O InfluxDB pode ser usado com Docker ou instalando o banco de dados na sua máquina. Para instalar o InfluxDB basta baixar o pacote comprimido no site InfluxData e descomprimir na pasta C:\Program Files\InfluxData\, após isso basta abrir o terminal do seu computador e rodar o binário do banco de dados.

  cd "C:\Program Files\InfluxData\"
  ./influxd

Após isso você consegue acessar a UI do influxDB que fica por padrão no endereço http://localhost:8086

Grafana

O grafana é uma aplicação de código aberto onde é possível criar dashboards que refletem os dados que estão armazenados em alguma fonte de dados que você especifica. Ele pode ser usado de duas formas: como container Docker ou instalado localmente. Para instalar basta entrar no site do Grafana e selecionar o seu sistema operacional. Se você estiver no windows baixe o arquivo .msi e siga o instalador. Após finalizar a instalação o servidor do grafana ja estará rodando na porta 3000 http://localhost:3000.

API Asp.Net Core 3.1

Aqui será usado Visual Studio 2019. Crie uma API Asp.Net Core 3.1 com os seguintes passos:

Selecione a opção Criar um projeto
Selecione o projeto Aplicativo Web ASP.NET Core e dê o nome que desejar

Após essa criação adicione o seguinte pacote prometheus-net.AspNetCore
Se você não sabe instalar um pacote, segue as instruções:

Selecione a opção Ferramentas > Gerenciador de pacotes do NuGet > Gerenciar pacotes do NuGet para a Solução
Na janela que irá abrir selecione a aba Procurar e digite o nome do pacote.
Após encontrar o pacote selecione ele e instale na sua solução.

Após fazer isso basta você adicionar o middleWare do prometheus para expor as metricas da sua API no endpoint /metrics. O app.UseHttpMetrics() deve ser posto após app.UseRouting().

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
     ...
     app.UseRouting();
     app.UseHttpMetrics();

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

Quando você rodar a sua API e consultar o endpoint /metrics verá o seguinte resultado:

Salvando as métricas no InfluxDB

O InfluxDB tem os buckets que são onde as métricas são armazenadas, porém com Asp.net core você só tem ferramentas/pacotes que te possibilitam escrever e consultar esse bucket, não tem um pacote que colete e insira os dados diretamente no bucket. Para isso o InfluxDB também oferece os scrapers que são coletores que buscam dados de um endpoint informado por você que expõe as métricas no padrão de escrita Prometheus. Esses Scrapers ficam varrendo o endpoint que você informou e guarda os dados que encontra no bucket informado por você.
Para utilizar o Scrapper você precisa:

Criar um Bucket
Criar um Scraper

Se você não souber como criar assista o video. Criando buckets e scrapers

Vale ressaltar que na opção "Target URL" para criar o scraper você deve informar o endpoint de métricas da sua API.
Após isso, quando você rodar a sua API e começar a fazer requisições para ela os dados serão inseridos nos buckets, e você vai poder visualizar que eles estão sendo salvos através da opção Explore na interface gráfica do InfluxDB http://localhost:8086.

Criando Dashboard no Grafana

Depois de ter instalado o grafana você deve acessar o endereço http://localhost:3000, fazer login e começar os preparativos para visualizar os seus dados que estão armazenados no InfluxDB. Para isso você deve:

Adicionar a fonte de dados do InfluxDB
Criar o Dashboard de forma que cada quadro represente uma query ao Bucket

Assista o vídeo para saber como fazer os dois passos anteriores.

Se você não conhece a forma de escrita com Influx e não tem intimidade com ela você pode utilizar o construtor de query (Query Builder), selecionar os parâmetros que você quer visualizar e depois copiar o script gerado em Script Editor (Esse procedimento é mostrado no vídeo sugerido logo acima).
Uma informação que acho relevante citar aqui é: você pode verificar os tipos de dados disponibilizados pela ferramenta prometheus-net.AspNetCore olhando o seu endpoint /metrics. Cada métrica tem um breve resumo com a sua descrição (#HELP) e tipo (#TYPE).

Saber o tipo de informação disponibilizada te ajudará a escolher o tipo de gráfico correto para a sua visualização.

Com o prometheus-dotnet você também pode criar suas próprias métricas, em um próximo tutorial demonstrarei como pode ser feito!

Tutorial para Aplicar Migrations em Aplicações ASP.NET

Beatriz813 — Sat, 24 Jul 2021 17:19:51 +0000

Para realizar esta tarefa criei dois projetos para exemplificar os dois métodos possíveis a fim de criar e mapear classes para tabelas em bancos de dados. Um utilizando System.ComponentModel.DataAnnotations e outro o método OnModelCreating.

Usando OnModelCreating

O primeiro projeto a ser criado é o ef-sem-annotations, criamos ele através do comando:

Nele iremos precisar instalar dois pacotes o MySql.Data.EntityFrameworkCore versão 8.0.22 e Microsoft.EntityFrameworkCore.Design versão 3.1.10.

Após a criação do projeto criamos a classe Pessoa que irá representar a nossa tabela.

Depois criamos a classe DataContext que será a nossa orquestradora, onde iremos declarar efetivamente que a classe Pessoa é o mapeamento de uma tabela.

O próximo passo é criar a connection string com o nosso banco de dados.

Feito isso podemos aplicar a migration com os seguintes comandos:

Ao aplicar a migration podemos conferir o resultado no banco de dados. Repare nos tipos e nas regras de cada coluna, são bem genéricas. Mas isso acontece por que não aplicamos nenhuma regra.

O primeiro modo de aplicar regras a essa migration é utilizando a sobrescrita do método OnModelCreating na classe DataContext.

Repare que agora os campos Nome e Idade são obrigatórios e o primeiro tem o tamanho máximo de 30 caracteres. Para aplicar essas regras ao banco de dados executamos uma nova migration

Com isso temos o novo resultado no banco de dados:

Usando Annotations

O segundo projeto chamado ef-com-annotations foi criado como uma WebApi também.

Nele iremos precisar instalar dois pacotes o MySql.Data.EntityFrameworkCore versão 8.0.22 e Microsoft.EntityFrameworkCore.Design versão 3.1.10.

Utilizamos o pacote System.ComponentModel.DataAnnotations na construção da classe Pessoa.

A classe DataContext fica:

A nossa string de conexão fica:

E então podemos aplicar a nossa migration:

O resultado desse código no banco de dados é o seguinte:

Repare que em ambos métodos chegamos ao mesmo resultado, porém um com menos código que outro. Essas são duas formas possíveis de mapear classes para bancos de dados, basta você analisar qual das duas é mais adequada para a sua solução.

Como criar uma extensão para contabilizar o tempo que você passa em páginas Web

Beatriz813 — Fri, 12 Jun 2020 22:45:26 +0000

O intuito deste tutorial é incentivar você que é iniciante, e que está sem ideias para criar projetos, a exercitar seus conhecimentos em Javascript. 💙

Obs.: Recomendo que você visite as documentações das tecnologias usadas.

O código deste projeto está disponível no github

Resultado da extensão

Tecnologias usadas

Explicando a ideia da extensão

A ideia é criar uma extensão para o Google Chrome visando contabilizar quanto tempo uma página Web (site) fica aberta em nossos navegadores. Vamos partir do princípio que o tempo passado em uma página Web deve ser contabilizado desde o momento em que ela é carregada/inicializada até o momento que mudamos para outro site dentro da mesma aba ou a fechamos.

O Código

Primeiro de tudo devemos criar o arquivo manifest.json, nele iremos declarar informações sobre a nossa extensão e também alguns arquivos que iremos utilizar.

 {
    "manifest_version": 2,
    "name": "Monitor de sites",
    "version": "0.0.1",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ]
        }
    ],
    "background": {
        "scripts": ["background.js"],
    },
    "permissions": [
        "tabs"
    ],
    "browser_action": {
        "default_popup": "index.html",
        "default_icon": "work.png",
        "title": "Monitor de sites"
      }
}

Irei explicar algumas propriedades desse arquivo que acho relevante saber para esse projeto. (Se quiser saber mais sobre o manifest.json acesse a documentação do google)

A propriedade background é onde definimos o nosso script principal que mantém todo o gerenciamento de tempo em cada aba.
A propriedade permissions serve para nos dar acesso a APIs que iremos utilizar na nossa extensão
A propriedade browser_action define como o icone da nossa extensão será mostrado no canto superior direito do navegador e também qual conteúdo será apresentado para o usuário quando clicado.

Arquivo background.js

Aqui temos acesso à API do chrome. Nele vamos "escutar" o objeto tabs, quando ele for atualizado e quando for fechado.

chrome.tabs.onUpdated.addListener(tabAtualizada)

chrome.tabs.onRemoved.addListener(tabFechada)

A função de callback tabAtualizada recebe três parâmetros de entrada tabId, changeInfo, tab onde:

tabId é o id da tab atualizada
changeInfo contém informações sobre o status da aba (se ela ja carregou ou se está carregando)
Objeto tab que traz algumas informações referentes ao conteúdo carregado na aba.

Já a função de callback tabFechada traz apenas o id da aba fechada.

Na função tabAtualizada é preciso verificar se o status da página está como "complete" (se ela carregou) e também se a url da aba é diferente de "chrome://" pois o tempo em páginas referentes ao navegador não nos é interessante.
Para melhorar a visualização do algoritmo observe este fluxograma:

Já na função tabFechada seguiremos esta linha de pensamento:

Todo o tempo passado nos sites é guardado em um array no localStorage. Quando vamos no arquivo principal.js e recuperamos essas informações do localStorage, é preciso:

Criar um array com o nome dos sites acessados

for(dado of dadosNavegacao) {
    sites.push(dado.titulo)
    let temp = dado.tempo / 60000
    temp = temp.toFixed(2)
    tempo.push(temp)
}

Criar um array de cores de acordo com a quantidade de sites armazenados

for (let i = 0; i <= Math.ceil(sites.length/6); i++) {
    cores = [...cores, ...coresPadrao]
    coresBorda = [...coresBorda, ...coresBordaPadrao]
}

Criar o gráfico

Chart.Bar('myChart', {
    data: {
        labels: sites,
        datasets: [{
            label: 'Tempo nos Sites (em minutos)',
            data: tempo,
            backgroundColor: cores,
            borderColor: coresBorda,
            borderWidth: 1
        }]
    },
    options: {
        maintainAspectRatio: false,
        tooltips: {},
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    display: false,
                    beginAtZero: true
                }
            }]
        }
    }
})

Espero que este tutorial tenha incentivado e ajudado você a criar uma extensão para o Google Chrome.
😘 🌈

React Native com mapa e geolocalização (Aplicativo Android)

Beatriz813 — Wed, 27 May 2020 23:44:58 +0000

Tecnologias utilizadas

Preparação

react-native-maps

Instalamos o pacote através do seguinte comando:

$ yarn add react-native-geolocation-service

Devemos adicionar o seguinte código em android/app/src/main/AndroidManifest.xml

<application>
   <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="Sua API KEY do google maps"/>

  <!-- You will also only need to add this uses-libray tag -->
  <uses-library android:name="org.apache.http.legacy" android:required="false"/>
</application>

Para as versões do react native inferiores a 0.60 deve ser realizado o seguinte passo:

Caso a sua versão seja superior ou igual a 0.60 esse passo torna-se desnecessário

Arquivo: build.gradle

ext {
  compileSdkVersion   = 28
  buildToolsVersion   = "28.0.3"
  minSdkVersion       = 16
  targetSdkVersion    = 28

  // Any of the following will work
  googlePlayServicesVersion      = "17.0.0"
  // playServicesVersion         = "17.0.0"
  // playServicesLocationVersion = "17.0.0"
}

Gerando a chave de API Google Maps

Para realizar esta etapa você precisa ter uma conta no google e precisa acessar o seguinte endereço

Você deve logar com a sua conta do google. Após o login a seguinte tela será apresentada para você

Aceite os termos e continue.

Selecione a opção API no menu lateral e crie um novo projeto, digite o nome do seu projeto

Após criar o seu projeto a seguinte tela será apresentada. Nesse dashboard selecione a opção Maps SDK for Android e clique no botão ativar

Após esse passo você deve selecionar a opção Credenciais no menu lateral e clicar em Credenciais em APIs e serviços

Isso te levará para essa tela onde você irá clicar em CRIAR CREDENCIAIS

E logo será criada a sua chave de API

react-native-geolocation-service

Instalamos o pacote com o comando:

$ yarn add react-native-geolocation-service

Devemos adicionar as permissões no arquivo android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

No Código

Para pegar a localização atual do usuário iremos utilizar o objeto Geolocation do pacote react-native-geolocation-service

import Geolocation from 'react-native-geolocation-service';

const App = () => {
const [minhaLocalizacao, setMinhaLocalizacao] = useState({})

useEffect(() => {
    Geolocation.getCurrentPosition(
        (position) => {
          setMinhaLocalizacao({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          })
          console.log('minha localização => ', minhaLocalizacao);
        },
        (error) => {
          // See error code charts below.
          console.log(error.code, error.message);
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }, [])
}

Os parâmetros do método getCurrentPosition(sucesso(), erro(), opções)

Como estou escrevendo os componentes como funções tive que usar o useEffect(), e para que ele execute apenas uma vez é preciso passar um array vazio como segundo parâmetro para que ele se comporte como se fosse no método componentDidMount. Referência da documentação

Para utilizar a localização obtida vamos usar o component MapView do pacote react-native-maps para renderizar o nosso mapa

import MapView from 'react-native-maps'


const App = () => {
...
   return (
      <>
      <MapView
        region={minhaLocalizacao}
        style={{ width: 360, height: 570}}
        showsUserLocation={true}
        onPress={(position) => getLocalizacao(position.nativeEvent)}
      />
    </>
   )
}

Com isso temos um mapa que marca a sua localização inicial.

Se você tirar o atributo {{ width: 360, height: 570}} talvez o mapa não apareça.

Podemos também inserir marcadores no mapa utilizando o componente Marker do pacote react-native-maps. E utilizar o atributo onPress do componente MapView para pegar a localização de onde a pessoa clicou no mapa.

import MapView, { Marker } from 'react-native-maps';

<>
      <MapView
        region={minhaLocalizacao}
        style={{ width: 400, height: 500}}
        showsUserLocation={true}
        showsMyLocationButton={true}
        moveOnMarkerPress={true}
        onPress={(position) => getLocalizacao(position.nativeEvent)}
      >
        <Marker
          coordinate={posicaoMarcador}
        />
      </MapView>
    </>

O atributo coordinate do componente Marker deve receber um objeto assim:

{
   latitude: Number,
   longitude: Number
}

Com esse pedaço de código você pode clicar em um ponto qualquer do mapa e ele será marcado como na imagem a seguir

Dado este tutorial agora você terá uma base para inserir mapas no seu aplicativo android.