DEV Community: Alex Oliveira

Como Transformei o Armazenamento do Meu Site sem Mudar uma Linha do Frontend (e ainda deixei tudo mais seguro)

Alex Oliveira — Wed, 09 Sep 2026 20:38:24 +0000

👋 Olá! Meu nome é Alex, sou Engenheiro de Software e entusiasta de arquitetura de sistemas. Atualmente focado em resolver problemas reais com código limpo e infraestrutura inteligente. Acompanhe meus artigos para ver como transformo desafios complexos em soluções pragmáticas.

Se tem uma coisa que incomoda qualquer desenvolvedor web é ver o repositório do projeto crescendo descontroladamente por causa de imagens e documentos. Foi exatamente esse o ponto de partida da minha jornada técnica mais recente.

O Cenário (ou o "Caos Controlado" inicial)

Até ontem, o site funcionava de um jeito clássico: tudo na wwwroot.
Quando precisávamos adicionar uma foto nova ao catálogo, ela ia direto para a pasta do projeto. Isso parecia prático no início, mas rapidamente se tornou um pesadelo: o repositório do Git ficou pesado, o deploy demorava uma eternidade e clonar o repositório também.

O estopim foi quando decidimos migrar para um serviço de armazenamento open-source externo. Ele era ótimo, barato e escalável, mas tinha um detalhe: exigia autenticação até para os GETs. Ou seja, para exibir uma simples imagem pública, eu precisava de um token de autorização.

E aqui vinha o grande dilema: se eu colocasse o link direto do storage no HTML, o navegador bateria de frente com um 401 Unauthorized. Se eu deixasse na wwwroot, eu não usaria o storage. Como resolver isso sem reescrever o frontend inteiro?

A Solução (Primeira Fase): O "Proxy de Mídia" com Interceptação Inteligente

A ideia foi simples na teoria, mas deliciosa na prática: transformar o próprio Backend em um Proxy Autenticado.

Criei um Middleware/Controller que intercepta todas as requisições que antes iam para a wwwroot (como /imagens/* e /documentos/*). Em vez de o servidor procurar o arquivo no disco, ele "segura" a requisição e assume o controle total do processo.

O fluxo ficou assim:

O usuário acessa a URL que sempre acessou (ex: www.meusite.com/imagens/carro.jpg). Transparência total.
O Backend recebe a requisição, mas não vai na wwwroot em busca do arquivo.
Ele pega o access_token que está guardado em memória (em uma variável estática/Singleton) no servidor, gerenciado com renovação automática via credenciais do .env.
Com esse token, ele abre uma requisição HTTP interna (servidor-para-servidor) para o storage externo, baixa os bytes da imagem.
Por fim, ele devolve esses bytes para o navegador com o Content-Type correto, como se o arquivo estivesse ali fisicamente.

A Jornada é Gradual (E tudo bem!)

É importante destacar que essa foi a primeira etapa da arquitetura. Resolvemos o problema da leitura e exibição (GET) do catálogo de imagens. Portanto, neste exato momento, os uploads de imagens feitos pelos usuários no site ainda continuam sendo salvos localmente na wwwroot.

O próximo passo do projeto é justamente adaptar o endpoint de upload para que, em vez de escrever no disco, ele faça um POST autenticado diretamente para o storage externo. Quando essa fase estiver concluída, aí sim teremos o desacoplamento total e a wwwroot finalmente ficará livre de arquivos gerados pelos usuários — restando apenas os arquivos estáticos essenciais (CSS, JS e fontes).

Os Ganhos (Mesmo na Fase Inicial)

Mesmo sendo uma implementação parcial, os benefícios já são enormes:

Repositório Levíssimo: Os arquivos do catálogo (que não eram gerados por upload, mas sim estáticos do projeto) já saíram do repositório. O Git clona em segundos e os deploys ficaram muito mais rápidos.
Armazenamento Escalável: As imagens pesadas do catálogo agora estão em um storage dedicado. Podemos guardar gigabytes sem preocupação com o espaço finito do servidor.
Segurança Total: O token de autorização do storage nunca, em hipótese alguma, chega ao navegador. Ele fica restrito à memória do servidor. Mesmo que alguém inspecione o tráfego, só verá a requisição para o meu domínio, e não para o storage original.
Transparência e Migração Zero: Como a URL permaneceu idêntica (/imagens/foto.jpg), o frontend não precisou ser reescrito. O usuário final nem percebeu a mudança nos bastidores — exatamente como deve ser.

Aprendizado Final

Essa implementação me lembrou que, às vezes, a melhor solução não está em mudar a interface do usuário, mas sim em engenhar o fluxo de dados nos bastidores. E, mais do que isso, me ensinou a valorizar a entrega incremental.

Resolvemos a dor mais urgente (a wwwroot gorda e o acesso autenticado para GETs) sem paralisar o projeto. O upload e outras boas práticas, como mecanismos de performance, virão nas próximas iterações. No fim das contas, engenharia de software é sobre fazer escolhas conscientes e resolver problemas na ordem certa — e hoje, o site está mais leve, mais seguro e pronto para o próximo passo.

🤖 Transparência Tecnológica: Este artigo foi desenvolvido com o suporte de Inteligência Artificial generativa (Co-Authored By AI), que atuou como meu "pair programmer" para revisar conceitos e agilizar a escrita. A curadoria final, a validação técnica de cada linha de código e a responsabilidade sobre as decisões arquiteturais são 100% minhas.

Commit gerado por IA no CLI

Alex Oliveira — Wed, 13 Aug 2025 13:23:47 +0000

Como Criar Mensagens de Commit Inteligentes com Gemini API no Linux

Cansado de escrever mensagens de commit? Vamos automatizar isso usando a API gratuita do Google Gemini! 🚀

🎯 O que vamos construir

Um comando que analisa suas mudanças de código e gera mensagens de commit seguindo conventional commits, copiando diretamente para sua área de transferência para colar no VS Code.

📋 Pré-requisitos

Node.js instalado
Git configurado
Conta Google (para API key)
Linux (Ubuntu, Debian, Arch, etc.)

🔧 Passo 1: Obter a API Key do Gemini

Acesse Google AI Studio
Faça login com sua conta Google
Clique em "Get API Key" no menu lateral
Clique em "Create API Key"
Copie e guarde a chave (ela só aparece uma vez!)

📦 Passo 2: Instalar dependências

# Instalar CLI oficial do Gemini
npm install -g @google/gemini-cli

# Instalar xclip para clipboard (Ubuntu/Debian)
sudo apt install xclip

# Para Arch Linux
sudo pacman -S xclip

# Para Fedora/CentOS
sudo dnf install xclip

⚙️ Passo 3: Configurar o Gemini CLI

# Configurar sua API key
echo 'export GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_ID"' >> ~/.bashrc

# Atualizar o bashrc (~/.zshrc ou ~/.profile)
source ~/.bashrc

# Verificar se funcionou
gemini -p "Olá, você está funcionando?"

📝 Passo 4: Criar o script

# Criar diretório para scripts pessoais
mkdir -p ~/bin

# Criar o arquivo do script
nano ~/bin/gemini-commit

Cole este conteúdo no arquivo:

#!/bin/bash
# ~/bin/gemini-commit

DIFF=$(git diff --cached)
if [ -z "$DIFF" ]; then
  echo "❌ Nenhuma mudança staged. Use 'git add' primeiro."
  exit 1
fi

echo "🤖 Gerando mensagem de commit..."

COMMIT_MSG=$(gemini -p "Analise este diff e crie uma mensagem de commit concisa usando conventional commits em português (feat:, fix:, docs:, refactor:, style:, test:, chore:). Máximo 50 caracteres no título. Gere uma mensagem detalhada das mudanças mas seja breve. IMPORTANTE: Responda APENAS com a mensagem de commit, sem formatação markdown, sem crases, sem explicações extras.

Diff:
$DIFF")

if [ -n "$COMMIT_MSG" ]; then
  # Remover caracteres markdown e limpar
  COMMIT_MSG=$(echo "$COMMIT_MSG" | sed 's/```

//g' | sed 's/^[[:space:]]*//' | sed 's/[[:space:]]*$//')

  echo ""
  echo "✅ Mensagem gerada:"
  echo "📋 Copie o texto abaixo:"
  echo ""
  echo -e "\033[1;32m$COMMIT_MSG\033[0m"
  echo ""
  echo "📝 Cole no VS Code e commit!"
else
  echo "❌ Erro ao gerar mensagem"
fi

🔐 Passo 5: Tornar executável e configurar PATH


bash
# Tornar o script executável
chmod +x ~/bin/gemini-commit

# Adicionar ~/bin ao PATH (se ainda não estiver)
echo 'export PATH="$HOME/bin:$PATH"' >> ~/.bashrc

# Criar um alias conveniente
echo 'alias gcm="gemini-commit"' >> ~/.bashrc

# Recarregar configurações
source ~/.bashrc

🚀 Como usar


bash
# 1. Fazer suas alterações no código
echo "nova funcionalidade" >> arquivo.js

# 2. Adicionar ao stage
git add .

# 3. Gerar mensagem de commit
gcm

# 4. Ir no VS Code e colar (Ctrl+V) na caixinha de commit
# 5. Revisar e commitar normalmente

🎨 Exemplo de uso


bash
$ git add .
$ gcm

🤖 Gerando mensagem de commit...
✅ Mensagem copiada para clipboard!
💡 Mensagem: feat: adiciona validação de email no formulário de cadastro

📝 Agora é só colar (Ctrl+V) na caixinha do VS Code!

⚡ Customização

Você pode personalizar o prompt editando o script:


bash
nano ~/bin/gemini-commit

Modifique a parte do prompt para suas necessidades:

Idioma (português/inglês)
Estilo de mensagem
Regras específicas
Tamanho máximo

🔍 Troubleshooting

Comando não encontrado


bash
# Verificar se ~/bin está no PATH
echo $PATH | grep "$HOME/bin"

# Se não estiver, adicionar novamente
echo 'export PATH="$HOME/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Erro de API


bash
# Verificar configuração
gemini config list

# Reconfigurar se necessário
echo 'export GOOGLE_CLOUD_PROJECT="YOUR_PROJECT_ID"' >> ~/.bashrc

# Atualizar o bashrc (~/.zshrc ou ~/.profile)
source ~/.bashrc

xclip não funciona


bash
# Instalar xclip
sudo apt install xclip

# Ou usar alternativa
sudo apt install xsel
# E no script trocar por: echo "$COMMIT_MSG" | xsel --clipboard

💡 Vantagens desta abordagem

✅ Gratuito: API do Gemini tem tier gratuito generoso
✅ Rápido: Resposta em segundos
✅ Flexível: Prompt totalmente customizável
✅ Integrado: Funciona perfeitamente com VS Code
✅ Conventional Commits: Segue padrões da indústria
✅ Offline-friendly: Só precisa de internet na hora da geração

🤝 Contribuição

Encontrou uma melhoria? Compartilhe nos comentários! Este setup pode ser expandido para:

Suporte a múltiplas linguagens
Templates de mensagem por tipo de projeto
Integração com hooks do Git
Análise de contexto do projeto

Gostou? Deixe um ❤️ e compartilhe com outros devs que também querem commits mais inteligentes!

AI generated content

Tools and Techniques That Help Me Stay Productive as a Developer

Alex Oliveira — Wed, 16 Apr 2025 22:45:34 +0000

I'm someone who needs to organize and track tasks and habits to stay on course. Tracking helps me reflect on my actions throughout the day or week and adjust them if necessary.

Productivity is something I particularly enjoy—not because I'm naturally good at it, but because it's a continuous process. For me, it's mostly about learning more about myself. I think about this a lot because our days often feel rushed. We need to work, make time to study, and take care of ourselves.

It's easy to only do what we enjoy, but if we ignore the rest, things can quickly get out of balance. Tracking your habits and organizing your routine are great ways to identify what you're missing, recognize when you're most productive, and take steps to improve how you use your time.

Tools I Use

1. Loop Habit Tracker

Want to start a new habit and make sure it sticks? This open-source app is available on Android. You can track habits like pages read per day, gym visits, and more.

Check out the code.

2. Toggl Track

Toggl Track is a time-tracking tool that helps you visualize how your time is spent—coding, working, studying, or whatever your focus may be. It generates reports in tables, bar charts, and even donut (pizza) charts 🍕.

You only need to set up a project and a description once, and after that, it's just one click to start tracking again.

Favorite features:

Time goals: You can set weekly, monthly, or daily goals. I use it to keep a consistent number of hours dedicated to studying each week.
Pomodoro timer: Available on the desktop app, browser extension, and mobile app. You can customize how long your focus and break blocks last.
Automatic tracking: On the desktop version, you can set triggers (like a specific web page or app) to start tracking automatically.
Team features: If you work with a team or clients, Toggl allows you to manage projects, set hourly rates, and generate reports and invoices.

3. Notion

I use Notion to take notes and track my goals (career, study, health, etc.).

Think of it as a powerful notebook for everything you can imagine. It supports databases, automations, and structures that you can customize to suit your needs. Create reading lists, set life goals, plan your week—you name it.

You can also start with a template to make setup easier.

4. Calendar

Calendars are great for planning your week or month. Add your fixed appointments and you'll get a better picture of your available time.

Block time for studying, exercising, reading, and more. You can also connect your calendar to tools like Toggl through integrations.

This helps prevent overplanning and lets you realistically see how much you can do in a day.

Techniques I Use

These are strategies I apply both with and without digital tools:

Eisenhower Matrix

This technique helps you prioritize tasks by urgency and importance. It’s a great way to identify what needs your attention and what can be delegated, scheduled, or even eliminated.

It gives you clarity and helps reduce mental overload.

Credits: Asana

Pomodoro Technique

Credits: Alvaro Montoro

Pomodoro works for me in two main ways:

To start tasks:

Starting can be tough if you're prone to procrastination, but telling yourself to just do 25 minutes makes it much easier to begin.
To improve focus:

You break work into focused sessions, which is more effective since most people struggle to stay concentrated for long stretches.

To-do Lists

To-do lists are powerful! Starting the day with small tasks already listed helps you avoid wasting time wondering "what should I do next?"

But be careful—don’t overload your list without considering how much time each task will actually take. That’s where combining your list with a calendar becomes super helpful.

Final Thoughts

You don't need tons of tools to be more productive. Start small—pick one and see how it fits your workflow.

Productivity is about understanding how you work, your habits, and your preferences, then using that knowledge to move toward your goals.

Don't try to build too many habits at once. Creating just one new habit is already hard. Be realistic and start small again.

Best regards,

Aleks