Forem: Tadeu Barbosa

Simplificando Testes no NestJS com Injeção de Valores

Tadeu Barbosa — Thu, 28 Aug 2025 22:13:11 +0000

Quando trabalhamos com NestJS, é muito comum ver serviços injetando o ConfigService diretamente. Isso funciona bem, mas pode tornar os testes mais complexos e acoplar o código a detalhes de configuração.

Vamos comigo enquanto escuto uma playlist de techno no youtube.

Neste artigo, vou mostrar uma abordagem simples para desacoplar suas classes e facilitar os testes, injetando valores primitivos prontos via módulo.

O problema: acoplamento ao ConfigService

Um serviço de criação de contato que valida a data mínima poderia ser escrito assim:

@Injectable()
export class CreateContactService {
  constructor(private readonly config: ConfigService) {}

  execute(name: string, birthDate: Date) {
    const minDate = this.config.get<Date>('CONTACT_MIN_DATE');
    if (birthDate < minDate) {
      throw new Error('Data inválida');
    }
    return { name, birthDate };
  }
}

Funciona, mas agora qualquer teste precisa mockar o ConfigService.Isso gera fricção desnecessária.

A solução: injetar valores prontos via módulo

Podemos mover a responsabilidade para o módulo:

@Injectable()
export class CreateContactService {
  constructor(private readonly minDate: Date) {}

  execute(name: string, birthDate: Date) {
    if (birthDate < this.minDate) {
      throw new Error('Data inválida');
    }
    return { name, birthDate };
  }
}

E no módulo:

@Module({
  providers: [
    {
      provide: CreateContactService,
      useFactory: (config: ConfigService) => {
        return new CreateContactService(
          config.get<Date>('CONTACT_MIN_DATE'),
        );
      },
      inject: [ConfigService],
    },
  ],
  exports: [CreateContactService],
})
export class ContactModule {}

Por que é melhor?

Classes mais puras – não sabem de onde o valor veio
Testes mais simples – basta instanciar new CreateContactService(new Date('2000-01-01'))
Configuração centralizada – módulos realmente controlam dependências
Alinhado a SOLID – especialmente Dependency Inversion Principle

Conclusão

Essa pequena mudança de perspectiva (deixar o módulo resolver configs e injetar valores prontos) pode simplificar bastante seus testes e deixar seu código mais limpo.

Injeção de dependência não é só sobre classes complexas: até valores primitivos podem (e devem) ser tratados como dependências.

E você, já aplica esse padrão em seus projetos NestJS?

Ser dev não é (ou não deveria ser) apenas escrever código

Tadeu Barbosa — Sun, 10 Aug 2025 17:15:03 +0000

Ano passado, criei um webapp para resolver uma dor pessoal: gerar um fundo borrado para fotos.

Simples, direto e sem precisar instalar nada.

Enquanto escrevo, estou ouvindo uma playlist no youtube de música techno.

Do zero à produção

Comecei no JavaScript puro, manipulando canvas e efeitos CSS.

Depois, estruturei tudo com Vue + Vite, investi bastante em SEO, aprendi sobre Google Analytics, foquei no mobile-first e implementei tradução com i18n.

Criei desde o nome, logo, imagens… tudo.

Os resultados

Mesmo sendo um projeto paralelo e sem fins lucrativos, alcancei:

1.1k+ usuários ativos/mês
CTR orgânico no Google acima de 80%
Público crescente no Brasil, México e outros países de língua espanhola

O que realmente importou

Mais do que números, o valor real foi:

Construir um produto do zero até ter usuários reais
Analisar dados e tomar decisões com base neles
Equilibrar UX, performance e viabilidade técnica
Ter visão de produto além do código
Priorizar impacto real em vez de “tecnologia da moda”
Comunicar de forma clara entre partes técnicas e não técnicas

Minha visão

Na minha opinião, o dev que só escreve código pode facilmente ser substituído.

Ser dev é viver estudando, conhecer profundamente as tecnologias que usa, explorar novas ferramentas e, acima de tudo, entender o usuário final — porque no fim, é para ele que estamos escrevendo código.

Você já teve algum projeto pessoal que mudou sua forma de trabalhar como dev?

Como sites te reconhecem mesmo sem login: uma introdução ao Fingerprinting

Tadeu Barbosa — Sat, 26 Jul 2025 21:47:13 +0000

Fingerprinting é uma técnica utilizada por muitos sites para identificar ou categorizar usuários.

Enquanto escrevo esse post, estou escutando uma playlist no youtube de techno.

Uns anos atrás eu entrei num hiperfoco nesse assunto e acabei pesquisando bastante sobre ele.

Minha dúvida era simples:

Como um site sabe que sou eu que estou acessando, mesmo sem login?
Como ele consegue mostrar anúncios em diversos sites diferentes, conectando tudo?

Naquela época, o Facebook e o Google ainda não tinham dominado a web com seus plugins de "curtir" e botões de login. Mesmo assim, um site sabia que era eu ali acessando.

A técnica em si não é boa nem má. Ela pode ser usada para:

prevenção de fraudes,
melhorar a experiência do usuário,
autenticação passiva,
entender o tráfego,
entre outros usos legítimos.

Mas também é usada para o lado oposto:

identificação forçada sem consentimento (mesmo com VPN, aba anônima etc),
criação de perfis comportamentais para venda de dados,
personalização abusiva (como exibir preços diferentes com base no seu perfil).

Abaixo, deixei uma imagem que ilustra de forma simples como isso funciona na prática:

Já parou pra pensar sobre esse assunto?

Integrando Mercado Pago Checkout Pro com Contas de Teste: problemas reais e como resolvi

Tadeu Barbosa — Sun, 29 Jun 2025 02:38:36 +0000

Recentemente estava tentando integrar o Mercado Pago (Checkout Pro). Por já ter integrado a eles a uns bons anos atrás em outros projetos, mas acabei tendo dificuldade com a documentação.

Neste post, compartilho os principais problemas que enfrentei com o modo sandbox do Mercado Pago e como consegui resolver cada um deles.

A ideia era criar um link de pagamento para o usuário. Exemplo:

Pacote 1: R$ 100,00

Ao pagar, o sistema adiciona o pacote na conta do usuário.

A questão é que:

1. Não encontrava o Access Token

Para ver as credenciais:

Criei uma conta no mercado livre
Criei uma aplicação no painel de desenvolvedor
Criei uma conta de vendedor e outra de comprador
Copiei o Access Token da conta de vendedor (ex: TEST-...)

2. Gerei o link de pagamento, mas não conseguia pagar

Fazia tudo certinho, mas ao acessar o link com uma conta de teste compradora, era redirecionado para uma tela pedindo confirmação de email, que obviamente não existe no sandbox.

3. Descobri que o comprador também precisa ter uma aplicação (!)

Esse foi o ponto de virada: mesmo sendo uma conta de teste COMPRADORA, ela precisa ter uma aplicação cadastrada no painel de desenvolvedores. Sem isso, os pagamentos não funcionam corretamente no checkout.

Encontrei essa informação... (no Reddit).

✅ Solução passo a passo

1. Crie duas contas de teste no painel sandbox

https://www.mercadopago.com.br/developers/panel/sandbox

Uma como vendedor (para gerar o link e receber o pagamento)
Outra como comprador (para simular o pagamento)

2. Crie uma aplicação nas DUAS contas

Na conta vendedor, para obter o Access Token
Na conta comprador, para que ela consiga usar o checkout pro

3. Gere a preference normalmente

const result = await preference.create({
  body: {
    items: [
      {
        title: 'Pacote 1',
        quantity: 1,
        unit_price: 100,
        currency_id: 'BRL',
      },
    ],
    back_urls: {
      success: 'https://seusite.com/sucesso',
      failure: 'https://seusite.com/falha',
      pending: 'https://seusite.com/pendente',
    },
    auto_return: 'approved',
    notification_url: 'https://seusite.com/webhook/mercado-pago',
    external_reference: `${userId}-${Date.now()}`,
  },
});

4. Faça o pagamento com a conta de comprador

Use o botão "Saldo em conta" se quiser evitar qualquer bloqueio com cartão
Se quiser usar cartão de teste, confirme a conta de email da conta test_user manualmente

Se esse post te ajudou, deixe um comentário ou compartilhe com quem estiver precisando.

📸 Blurtofit: Como criei uma ferramenta gratuita para transformar fotos verticais com fundo desfocado

Tadeu Barbosa — Sun, 15 Jun 2025 21:30:43 +0000

Saiba como criei uma ferramenta simples, gratuita e multilíngue que resolve um problema comum: adaptar fotos verticais com fundo borrado para redes sociais.

A ideia do Blurtofit nasceu de uma dor pessoal: como postar fotos verticais no Instagram ou TikTok sem cortar, distorcer ou colocar bordas estranhas?

Criei uma solução leve, gratuita e sem login: Blurtofit.app

🎯 O que é o Blurtofit?

O Blurtofit é uma ferramenta online para transformar imagens verticais em quadradas, adicionando um fundo desfocado automaticamente.

Sem anúncios
Sem cadastro
Sem rastreamento

Ideal para fotógrafos, designers ou criadores de conteúdo que querem ganhar tempo e manter o foco no que importa.

💻 Tecnologias utilizadas

Vue 3 + Vite como base do frontend
Vue I18n para suporte multilíngue (/pt, /en, /es)
Tailwind CSS para um layout limpo e responsivo
Vite SSG (parcialmente) para otimização de carregamento
Web API (Canvas) para aplicar o efeito de desfoque

⚙️ Desempenho e SEO

Estou constantemente otimizando o site com foco em:

✅ Core Web Vitals: LCP, FCP, CLS
✅ acessibilidade com contraste, navegação por teclado e sem dependência de JS
✅ metatags dinâmicas por idioma com useHead
✅ sitemap.xml + robots.txt configurados corretamente
✅ <noscript> com fallback para indexação

🌍 Multilíngue desde o início

Muitos acessos vieram de países latinos, então o app tem suporte completo para:

🇧🇷 Português (pt-BR)
🇺🇸 Inglês (en)
🇪🇸 Espanhol (es)

As rotas são visíveis via /pt, /en, /es, e as traduções estão organizadas por domínio.

📈 Resultados

Mesmo com um vídeo mal editado no TikTok (😅), o app começou a receber visitas, curtidas e feedback real de pessoas que compartilham da mesma dor que eu. O projeto está hospedado com:

Cloudflare + Heroku
Deploy via Vite
Sem cookies, analytics ou qualquer coleta de dados

✨ Próximos passos

Adicionar novos efeitos com IA (remoção de fundo, ajustes automáticos)
Melhorar ainda mais o tempo de carregamento e PWA

🧪 Quer testar?

👉 Acesse agora: https://blurtofit.app

🎁 É gratuito, leve, e pronto pra usar.

Se quiser ver o código, ideias ou trocar sobre performance, acessibilidade e Vue, é só comentar aqui ou me chamar. Bora criar ferramentas úteis e abertas! ✌️

O que aprendi pensando em como funciona a criptografia de ponta a ponta nos chats

Tadeu Barbosa — Sat, 03 May 2025 20:53:13 +0000

Estava assistindo umas coisas um dia desses e em um certo momento um pessoal precisou criar um chat com criptografia de ponta a ponta (e2ee). Já trabalhei com criptografia simples, além de usar sempre as chaves públicas e privadas no linux, github, ssh etc.

Resolvi pensar em como seria arquiteturar um sistema bem simples com esse tipo de funcionalidade. Não sei se já percebeu, mas o whatsapp tem essa funcionalidade. De uns anos pra cá os chats vêm com uma mensagem: "As mensagens nesse chat são criptografadas de ponta a ponta. Somente as pessoas nesse chat poderão visualizar o conteúdo."

O que é criptografia de ponta a ponta?

A criptografia de ponta a ponta, num contexto de chat, é quando cada usuário registrado no sistema recebe duas chaves, uma pública e uma privada. Essas chaves, falando entre muitas aspas, são sequências geradas por algoritmos de criptografia. Essas chaves ficam salvas somente na máquina desse usuário, não vão para o servidor (por segurança e para manter a confiabilidade do sistema de criptografia). Imagine que dois usuários estão prestes a se comunicar, internamente as chaves públicas são compartilhadas entre eles. E a partir dai ao enviar uma nova mensagem, essa mensagem é criptografada ("trancada") usando a chave pública do usuário 2. A mensagem é enviada por todo o sistema, salvo em banco etc, e assim que chega na máquina do segundo usuário, a mensagem é descriptografada ("destrancada") usando a chave privada.

Como eu acho que poderia ser a arquitetura desse sistema

Tenho estudado e tentado entender como funcionam as arquiteturas dos sistemas e como gerar arquiteturas cada vez melhores nos projetos que atuo. Pensando nisso pensei na seguinte coisa para esse projeto:

Na minha visão faria um sistema utilizando nestjs, vue, redis, socket e mongodb.

O mecanismo de criptografia seria uma lib interna que proveria as funções relacionadas a criptografia: gerar chaves, criptografar mensagem, descriptografar mensagem, tudo com testes etc.
O frontend onde haveria login, cadastro, visualização dos chats, disparos etc. Trataria de salvar as chaves localmente, e integrações com backend via api + socket.
O Backend lidaria com o banco de dados, cache, disparar mensagens para as filas, banco etc.
O infra lidaria com a geração dos builds do frontend, backend etc.

E você, já pensou em como estruturaria um sistema assim? Estou estudando mais sobre arquitetura de software e adoraria trocar ideias.

🚀 How to Use JavaScript Custom Events 🔥 (and Why You Need Them)

Tadeu Barbosa — Wed, 02 Oct 2024 15:52:06 +0000

Here's the adapted version of your post for dev.to:

🚀 How to Use JavaScript Custom Events 🔥 (and Why You Need Them)

Custom events in JavaScript offer a fantastic way to:

✅ Achieve modularity and reusability
✅ Improve code organization
✅ Facilitate communication between components
✅ Simplify data transfer

Scenario
Imagine you’re working on a vanilla JS store website with separate components like a product list, shopping cart, and notification system. Using custom events can help these components communicate efficiently when a product is added to the cart.

Example
Here’s how you can set up and use a custom event in your JavaScript application:

// Event listener for handling product added to cart
document.addEventListener('product-added-to-cart', function(event) {
  console.log('New product added to cart:', event.detail.product);
  console.log(`Notification: ${event.detail.product.name} has been added to your cart.`);
});

// Dispatching the custom event
const event = new CustomEvent('product-added-to-cart', {
  detail: { product: new Product('Green Jacket') }
});
document.dispatchEvent(event);

Why Use Custom Events?
Custom events simplify communication between separate parts of your application. For example, when a product is added to the cart, you might want to:

Update the shopping cart
Notify the user
Update the product stock

Custom events allow you to handle all these tasks without tight coupling between components, making your code more modular and maintainable.

What Do You Think?
Have you used custom events in your JavaScript projects? Share your experience in the comments below! 👇

Photograph by Mohammad Rahmani on Unsplash

Balancing Creativity and AI: How to Keep Producing Content

Tadeu Barbosa — Tue, 03 Sep 2024 13:01:34 +0000

Hello everyone! It's been a while since I wrote my last post here. But, in my defense, I got a bunch of responsibilities that made me not write anything.

I'm listening right now to ShalomTeck, PuffT - Feeling (Rádio Apolo) and thinking about this.

First of all
To me, producing content on the internet is something great if you want to improve your skills, even forces your brain to learn some subjects deeply.

As you know, I'm a software developer, and a subject that I love to learn and talk about is Technology. So, I'd write some posts about programming and related content. All of this before AI came and changed our lives.

AI in our daily routine
Yesterday someone asked me: How much do you use AI. So I've answered: In the morning, in the afternoon, and at night haha. Seriously, It's a part of my life now. And how can I use it to help me producing content?

Everyone knows that it's possible to generate an entire post. An example using perplexity.ai.

Maximizing AI in Content Creation
AI is a powerful tool for enhancing content creation. It helps writers generate ideas, draft articles, and refine their writing. Start by identifying your audience and content type, such as blogs or social media posts. Tools like GPT-3 can assist with brainstorming and outlining while optimizing for SEO to expand your reach. By combining human creativity with AI efficiency, you can produce engaging and impactful content.

As I said, I use those tools in my entire day, but for me you can be more productive or even growing up more using those tools to help you than using it to produce the entire content.

For example, English is my second language (as you can imagine reading this post), I could use AI to generate I post in English. But instead, using it to help me correct some mistakes or creating an image or even giving me ideas, is better.

It's all

As I said, for me, it's better keeping the majority of the content with my ideias and my brain and using the tools just as a copilot than using it for generating entire content. Even commiting some mistakes or something.

And about you?
What do you think about it? Let me know!

Unlocking the Power of AI: My Journey Begins

Tadeu Barbosa — Fri, 29 Mar 2024 14:57:30 +0000

Hi guys! It's being a long time since my last post. But, recently a friend of mine, Thiago (follow and read his posts too ;D ), that recently began writing, brought me some inspiration to start writing again.

While I write this, I'm listening to: YearMix 2020 - Progressive House by Miss Monique on Youtube.

A bit of history
Since ChatGPT was introduced in 2022, there's nothing else that the people are talking about. I know that OpenAI brought a lot of technology that no one was expecting at that moment.

Maybe all of the 'big techs' like Google, Microsoft, X, and others were scared because they didn't have a ready product to compete. Even if they owned a lot of data to make one, or they owned enough technology, OpenAI came out ahead.

Let's talk about coding
Since Chat GPT was released, I began using it. Sometime later, when Github Copilot was released, I became one of the paying users. AI is part of my developer tools.

A couple of times ago, with a client of mine, I created an integration with the Open AI Api. They already owned a chat between employees and consumers, even a chat with a local bot that following some rules, has the capacity to talk with consumers.

So, I connected AI to this chat bot and thing works like a charm. With my capability to work with AI, I solved some problems and brought some reliability to the chat bot.

My first "all in AI job"

After all of that context... Some days ago, a company contacted me, they was needing a service to read some uploaded files related with the company, extract some information and finally convert into a content that people can easily understand.

AI INPUT

The first thing about AI, is that AI is not "All Powerful Omniscient Machine". You need to prepare the input data. It means that you have to comprehend the data provided from the company and the AI needed input data.
Another important aspect to worry about is the financial issues. You can't create an AI integration without worrying about how much money that integration will cost to the company. Remember that they will pay to each character (or for a certain amount of characters), then the input is very, very important to work in.

AI OUTPUT
The second thing is that, as the input, comprehend the AI output and the company expectations. We can't resolve every human problem with AI, then we need to comprehend what AI can solve and equate the expectation of the company. Then, expectations equalized, we can work on the AI output and create the final product.

FINAL PRODUCT
AI can solve a lot of different problems in our world. Therefore, the final product can be totally different for each AI integration. You have to take some tech decisions with the company: "It's really necessary send data to AI each time it was requested? Can we cache the answers to use later?". And things like that.

That's all, Devs

In conclusion, working with AI involves finding a careful balance between understanding its capabilities and aligning with client expectations.
You need to make the client informed about the data input needing, about the cost (speccially) and the possibilities of AI.
I hope I continue working with AI and writing about it to brought some persperctive to all of AI enthusiasts.

[php-curtas] Resolvendo Cors Origins no Lumen

Tadeu Barbosa — Fri, 25 Feb 2022 13:53:01 +0000

Estou a uma dia tentando resolver um problema no Lumen e, agora que finalmente consegui resolver, resolvi trazer pra vocês!

Quem nunca teve problemas com CORS que atire a primeira pedra.

Depois de revirar toda a internet atrás de uma solução, tentar [e falhar miseravelmente] setar os headers na aplicação e tudo mais que você possa imaginar... Encontrei essa resposta no Stak Overflow.

Como resolver:

Criei um arquivo chamado CorsMiddleware dentro do diretório app/Http/Middlewares, com o seguinte conteúdo:

<?php

namespace App\Http\Middleware;

class CorsMiddleware
{
    public function handle($request, \Closure $next)
    {
        if ($request->isMethod('OPTIONS')) {
            $response = response('', 200);
        } else {
            $response = $next($request);
        }
        $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Origin', '*');
        return $response;
    }
}

Esse middleware irá retornar 200 caso o método requisitado seja OPTIONS.

Em seguida basta registar o seu middleware no arquivo bootstrap/app.php:

 $app->middleware([
     App\Http\Middleware\CorsMiddleware::class
 ]);

Pronto! Agora sua aplicação poderá ser acessada por outras origins.
Espero ter ajudado, até a próxima!

[mysql curtas] Função case no MySQL

Tadeu Barbosa — Mon, 14 Feb 2022 12:00:45 +0000

Banco de dados não é o meu forte, porém estava estudando sobre o assunto e me deparei com algo novo para mim e queria compartilhar com vocês!

Como no exemplo da imagem em desataque, pode ser que você precise de uma condicional para verificar, por exemplo, se o salário de um funcionário é abaixo de R$5000, se está entre R$5000 e R$10000 ou acima. Você pode, diretamente pela chamada ao banco de dados, retornar isso para a linguagem que você está utilizando.

SELECT nome, cargo_id, salario,
CASE
  WHEN salario < 5000 THEN "aumento"
  WHEN salario > 10000 THEN "verificar"
  ELSE "não aumentar"
END classificacao
FROM empregados;

Esse código trará as colunas: nome, cargo_id, salario e classificação (sendo: "aumento" ou "verificar" ou ainda "não aumentar").

Bem legal, né?! Aprendi isso aqui e vim trazer para vocês!
Até a próxima!

[php-curtas]: Testando FormRequest no Laravel

Tadeu Barbosa — Fri, 21 Jan 2022 16:24:52 +0000

Há uma maneira de testar que o seu Controller irá receber exatamente o que você precisa, e isso você poderá fazer tanto antes de criar um Request (com TDD), ou após a criação para garantir que nada irá mudar!

Para testar você vai criar o seu teste normalmente:

use Tests\TestCase;

class CreateContactRequestTest extends TestCase
{
  public function testEnsureAValidIdWilBePassed()
  {
    //
  }
}

Após isso adicione o seguinte método setUp:

public function setUp(): void
{
  parent::setUp();
  $request = new CreateContactRequest();
  $this->rules     = $request->rules();
  $this->validator = $this->app['validator'];
}

Adicione também esses dois métodos para validação do Request:

protected function getFieldValidator($field, $value)
{
  return $this->validator->make(
    [$field => $value],
    [$field => $this->rules[$field]]
  );
}

protected function validateField($field, $value)
{
  return $this->getFieldValidator($field, $value)->passes();
}

Por fim, teste os fields que serão passados:

public function testEnsureAValidIdWilBePassed(): void
{
  $this->assertFalse($this->validateField('id', ''));
  $this->assertFalse($this->validateField('id', null));
  $this->assertTrue($this->validateField('id', 'any_id'));
}

Juntando tudo, teremos:

use Tests\TestCase;

class CreateContactRequestTest extends TestCase
{
  public function setUp(): void
  {
    parent::setUp();
    $request = new CreateContactRequest();
    $this->rules     = $request->rules();
    $this->validator = $this->app['validator'];
  }

  public function testEnsureAValidIdWilBePassed()
  {
    $this->assertFalse($this->validateField('id', ''));
    $this->assertFalse($this->validateField('id', null));
    $this->assertTrue($this->validateField('id', 'any_id'));
  }

  protected function getFieldValidator($field, $value)
  {
    return $this->validator->make(
      [$field => $value],
      [$field => $this->rules[$field]]
    );
  }

  protected function validateField($field, $value)
  {
    return $this->getFieldValidator($field, $value)->passes();
  }
}

Prontinho! :D
Espero ter ajudado! Deixe seu like ;)