96 termos

Glossário de Vibe Coding

Noventa e seis termos, um card cada. Da ideia ao lançamento: uma linha de explicação e um exemplo para cada um.

Explorar por tema

Teste um agora

05Design e experiência

Prototype

Protótipo

Faça primeiro um modelo clicável da interface para sentir como é usar.

Por exemplo

Faça algumas telas no Figma e percorra o fluxo clicando.

Figma

18Código e versões

Branch

Abra uma linha paralela a partir do código principal para desenvolver sem afetar a versão principal.

Por exemplo

Criei uma branch feature para construir o login.

Learn Git Branching

35Frontend e web

Browser DevTools

DevTools do navegador

O depurador embutido no navegador para inspecionar estrutura, estilos e erros.

Por exemplo

Quando a página não aparecia, abri o DevTools para ler o erro.

Chrome DevTools

41IA e prompting

RAG

Faça a IA buscar material relevante primeiro e responder a partir dele: menos alucinação, mais precisão.

Por exemplo

Meu app usa RAG para recuperar material do dicionário e então a IA escreve a explicação.

43Publicação e segurança

CI / CD

Testa, constrói e faz deploy automaticamente após cada commit, sem passos manuais.

Por exemplo

Configurei CI/CD no GitHub Actions e cada push faz deploy sozinho.

47Depurar e testar

Log

Informações que o programa registra sozinho enquanto roda, úteis para rastrear problemas.

Por exemplo

Li o log de execução e descobri por que a chamada à API falhou.

50Ideias e planejamento

Wireframe

Um esboço da página mostrando o layout e onde cada coisa fica, sem cor nem detalhe visual.

Por exemplo

Desenhei um wireframe antes para fixar onde ficam o botão e o texto.

Excalidraw

67Backend e dados

Cache

Guardar temporariamente os dados mais usados para o sistema responder mais rápido.

Por exemplo

Guardo os resultados das palavras populares no cache para aparecerem mais rápido.

68IA e prompting

Vector Database

Banco vetorial

Um banco feito para armazenar e recuperar vetores, comum em apps de IA como busca semântica.

Por exemplo

Guardo o vetor de cada palavra num banco vetorial para fazer busca semântica depois.

Cloudflare Vectorize

75Rede e protocolos

Status Code

Código de status

O número de três dígitos que o servidor devolve, indicando se a requisição deu certo.

Por exemplo

200 significa que deu certo; um 404 provavelmente indica URL errada.

MDN Status Codes

84Depurar e testar

Test Coverage

Cobertura de testes

A parcela do código alcançada pelos testes; mede se testar está sendo abrangente.

Por exemplo

A cobertura do meu projeto é 80%, então quase todo o código central está testado.

Vitest

88Publicação e segurança

Monitoring

Monitoramento

Acompanhar após o lançamento o estado do app e métricas-chave, como taxa de erro e tempo de resposta.

Por exemplo

Configurei monitoramento, vi a taxa de erros subir de madrugada e investiguei.

Workers Observability

97Ideias e planejamento

User Feedback

Feedback do usuário

Opiniões, sugestões e problemas relatados pelos usuários; base importante para melhorar o produto.

Por exemplo

Um usuário disse que a pronúncia não era clara, então melhorei o áudio.

Publicar uma página

Ver todos os termos

01Ideias e planejamento

Idea

Ideia

O que você quer construir e qual problema isso resolve.

Por exemplo

Um app que ajuda a descobrir a história por trás das palavras em inglês.

02Ideias e planejamento

MVP

Produto mínimo viável

Faça primeiro a menor versão que realmente funciona, para validar a ideia.

Por exemplo

A primeira versão só faz: ver algumas palavras e sua etimologia.

03Ideias e planejamento

PRD

Documento de requisitos

Escreva de forma geral o que o produto faz, para quem e por quê.

Por exemplo

Esta é a ficha completa do produto.

Markdown para HTML

04Ideias e planejamento

Spec

Especificação

Detalhe exatamente como um recurso deve funcionar.

Por exemplo

O botão de salvar fica no canto superior direito, fica sólido ao clicar e o dado é salvo no banco.

05Design e experiência

Prototype

Protótipo

Faça primeiro um modelo clicável da interface para sentir como é usar.

Por exemplo

Faça algumas telas no Figma e percorra o fluxo clicando.

Figma

06IA e prompting

Prompt

A instrução que você dá à IA; ela define a qualidade da saída.

Por exemplo

Faça um componente de cartão de palavra em React com a palavra, a pronúncia e um botão de salvar.

07IA e prompting

Context

Contexto

As informações relevantes de que a IA precisa para concluir a tarefa.

Por exemplo

Objetivo do produto + código atual + documento de requisitos: tudo isso é contexto.

08Código e versões

GitHub

Sincronize seu repositório local com a nuvem; também é o portfólio do desenvolvedor.

Por exemplo

Envie o código para o GitHub para ter backup e continuar em outra máquina.

Learn Git Branching

09Publicação e segurança

Deploy

Publique o app pronto num servidor para que outras pessoas possam acessar.

Por exemplo

Depois do deploy, seu app tem uma URL que qualquer pessoa no mundo pode visitar.

Hospedagem em 1 clique

10Ambiente de desenvolvimento

Code Editor

Editor de código

A ferramenta onde você escreve e edita código, como o Word para documentos.

Por exemplo

Escrevo código no Cursor: esse é o meu editor de código.

Cursor

11Ambiente de desenvolvimento

Terminal

Controle o computador direto por comandos de texto, sem clicar com o mouse.

Por exemplo

Digito comandos no terminal para instalar dependências.

ExplainShell

12Ambiente de desenvolvimento

Shell

O programa que recebe os comandos que você digita e realmente os executa.

Por exemplo

Uso zsh — é um tipo de shell.

Oh My Zsh

13Ambiente de desenvolvimento

Package Manager

Gerenciador de pacotes

Baixa, instala e gerencia as ferramentas e bibliotecas externas que um projeto precisa.

Por exemplo

Uso npm install para adicionar uma biblioteca nova.

npm

14Código e versões

Repository

Repositório

A coleção de todo o código, histórico e configuração de um projeto.

Por exemplo

Meu projeto Bunny é um repositório do GitHub.

15Código e versões

Commit

Tire uma foto desta alteração no código e deixe um registro permanente.

Por exemplo

Quando termino um recurso eu faço commit, e assim posso voltar a esta versão.

Learn Git Branching

16Código e versões

Push

Envie os commits locais para um repositório remoto como o GitHub.

Por exemplo

Uso git push para sincronizar o código com o GitHub.

17Código e versões

Pull

Baixe para a sua máquina o conteúdo mais recente do repositório remoto.

Por exemplo

Em equipe, faço git pull primeiro para trazer as últimas alterações.

18Código e versões

Branch

Abra uma linha paralela a partir do código principal para desenvolver sem afetar a versão principal.

Por exemplo

Criei uma branch feature para construir o login.

Learn Git Branching

19Frontend e web

Frontend

O que o usuário vê e manipula: botões, páginas, animações.

Por exemplo

A página inicial, os botões e os cards que vejo são feitos no frontend.

20Backend e dados

Backend

O que o usuário não vê: o tratamento de dados e a lógica de negócio nos bastidores.

Por exemplo

Quando faço login, o backend verifica minha conta e minha senha.

21Backend e dados

Database

Banco de dados

Onde os dados ficam guardados a longo prazo: usuários, itens salvos etc.

Por exemplo

As palavras que salvo ficam no banco e continuam lá na próxima vez.

22Backend e dados

API

A janela pela qual dois softwares fazem pedidos um ao outro.

Por exemplo

Meu app envia uma palavra à IA por uma API e recebe a explicação de volta.

MDN HTTP

23Backend e dados

API Key

Chave de API

O segredo que comprova quem você é ao chamar a API de outra pessoa. Nunca publique.

Por exemplo

Guardo a chave de API da OpenAI num arquivo .env.

24Código e versões

Framework

Uma estrutura já montada por outros para você entregar mais rápido.

Por exemplo

Uso Next.js como framework neste projeto.

25Ambiente de desenvolvimento

Dependency

Dependência

Uma ferramenta ou biblioteca externa que seu projeto precisa pegar emprestada para rodar.

Por exemplo

Este projeto precisa instalar algumas dependências para funcionar.

26Ambiente de desenvolvimento

Environment

Ambiente

O conjunto de sistema, ferramentas e variáveis que um programa precisa para rodar.

Por exemplo

Rodo o código no meu ambiente de desenvolvimento local, que não é o de produção.

27Ambiente de desenvolvimento

Runtime

A plataforma onde o código realmente executa, como Node.js ou Python.

Por exemplo

Meu projeto roda no runtime Node.js.

Node.js

28Frontend e web

HTML

Define qual conteúdo uma página tem: o esqueleto da página.

Por exemplo

Escrevi um título e um botão na página com HTML.

Abrir playground MDN HTML

29Frontend e web

CSS

Controla o estilo da página: cor, fonte, espaçamento e layout.

Por exemplo

Com CSS deixei o botão verde e arredondei os cantos.

MDN CSS Abrir playground

30Frontend e web

JavaScript

Dá vida à página: cliques, entrada, dados e outras lógicas de interação.

Por exemplo

Com JavaScript fiz a palavra aparecer ao clicar no botão.

MDN JavaScript

31Frontend e web

React

Um framework de frontend popular que constrói interfaces a partir de componentes.

Por exemplo

Com React transformei o cartão de palavra num componente reutilizável.

react.dev

32Frontend e web

Component

Componente

Um bloco de interface reutilizável e independente: botão, card, barra de navegação.

Por exemplo

Fiz um componente de cartão de palavra que serve em qualquer página.

33Frontend e web

State

Estado

Os dados que a interface tem agora; quando mudam, a página se atualiza sozinha.

Por exemplo

Depois que clico em salvar, o state vira true e o ícone fica sólido.

34Frontend e web

DOM

A árvore em que o navegador transforma o HTML, e que o JavaScript usa para mudar a página.

Por exemplo

Mudei o texto da página pelo DOM com JavaScript.

MDN DOM

35Frontend e web

Browser DevTools

DevTools do navegador

O depurador embutido no navegador para inspecionar estrutura, estilos e erros.

Por exemplo

Quando a página não aparecia, abri o DevTools para ler o erro.

Chrome DevTools

36Design e experiência

Responsive

Responsivo

Faz a página exibir bem no celular, no tablet e no computador.

Por exemplo

Configurei um layout responsivo e no celular também fica bonito.

web.dev

37Publicação e segurança

Hosting

Hospedagem

Rodar seu site ou app no servidor em nuvem de outra pessoa para o mundo acessar.

Por exemplo

Fiz o deploy do app na Vercel para que outros possam visitar online.

Hospedagem em 1 clique

38Publicação e segurança

Domain

Domínio

O endereço com nome do site, para o usuário chegar por um nome fácil de lembrar.

Por exemplo

Comprei o domínio www.mydapp.com.

Cloudflare Registrar

39Publicação e segurança

HTTPS / SSL

Criptografa o tráfego entre o site e o usuário; o navegador mostra um cadeado indicando conexão segura.

Por exemplo

Depois do deploy configurei HTTPS, então já há cadeado na barra de endereços.

Let's Encrypt

40Backend e dados

NoSQL

Um banco sem estrutura de tabelas fixa: mais flexível, bom para dados complexos ou variáveis.

Por exemplo

Guardo os registros de estudo no MongoDB, sem tabelas complexas.

MongoDB

41IA e prompting

RAG

Faça a IA buscar material relevante primeiro e responder a partir dele: menos alucinação, mais precisão.

Por exemplo

Meu app usa RAG para recuperar material do dicionário e então a IA escreve a explicação.

42Ambiente de desenvolvimento

Docker

Empacota um app com o ambiente que ele precisa para rodar igual em qualquer máquina.

Por exemplo

Empacoto o projeto com Docker e ele roda num servidor novo com um comando.

Docker docs

43Publicação e segurança

CI / CD

Testa, constrói e faz deploy automaticamente após cada commit, sem passos manuais.

Por exemplo

Configurei CI/CD no GitHub Actions e cada push faz deploy sozinho.

44Publicação e segurança

Serverless

Sem servidor para gerenciar: o código roda sob demanda e você paga pelo uso.

Por exemplo

Uso funções serverless da Vercel para a lógica de backend.

Cloudflare Workers

45Depurar e testar

Bug

Um erro ou problema num programa que faz ele se comportar de forma inesperada.

Por exemplo

A página dá erro depois que clico em salvar: isso é um bug.

46Depurar e testar

Debug

Depurar

Encontrar a causa de um problema e corrigi-lo.

Por exemplo

Depurei passo a passo a partir do erro e vi que um nome de variável estava errado.

47Depurar e testar

Log

Informações que o programa registra sozinho enquanto roda, úteis para rastrear problemas.

Por exemplo

Li o log de execução e descobri por que a chamada à API falhou.

48Depurar e testar

Test

Teste

Verificar se um programa se comporta como deveria.

Por exemplo

Depois do login testei o acesso normal, a senha errada e outros casos.

49Ideias e planejamento

User Flow

Fluxo do usuário

Os passos e o caminho que um usuário percorre para atingir um objetivo.

Por exemplo

Abrir o app → ver a palavra do dia → tocar na palavra → salvar. Esse é um fluxo do usuário.

50Ideias e planejamento

Wireframe

Um esboço da página mostrando o layout e onde cada coisa fica, sem cor nem detalhe visual.

Por exemplo

Desenhei um wireframe antes para fixar onde ficam o botão e o texto.

Excalidraw

51Design e experiência

UI

A apresentação visual do produto: cor, tipografia, ícones, botões.

Por exemplo

Desenhei a UI do app no Figma para ficar mais limpa.

52Design e experiência

UX

A sensação geral de usar o produto: se é usável, fluido e agradável.

Por exemplo

Simplificamos os passos para acharem mais fácil as palavras salvas: melhor UX.

53Código e versões

Algorithm

Algoritmo

Um conjunto claro de passos para resolver um problema, para o computador processar dados e chegar a um resultado.

Por exemplo

As redes sociais usam um algoritmo para decidir o que você vê no feed.

54Identidade e segurança

Phishing

Fingir ser uma organização confiável para fazer você entregar senhas ou dados de cartão.

Por exemplo

Recebi um e-mail fingindo ser meu banco pedindo para clicar num link: provável phishing.

Google Phishing Quiz

55Publicação e segurança

Cloud

Nuvem

Recursos de computação (armazenamento, software, servidores) entregues pela internet em vez da sua máquina.

Por exemplo

Guardo os arquivos na nuvem e acesso de qualquer lugar.

Cloudflare

56Código e versões

Git

Uma ferramenta que acompanha as mudanças do código e permite o trabalho em equipe.

Por exemplo

Uso Git para guardar versões diferentes do código e trabalhar com o time.

Learn Git Branching

57Ideias e planejamento

Iteration

Iteração

Melhorar o que já existe com pequenas atualizações que aproximam de um resultado melhor.

Por exemplo

Iteramos com o feedback dos usuários para melhorar o produto.

58Ideias e planejamento

Prioritize

Priorizar

Decidir o que fazer primeiro e o que deixar para depois, por importância e urgência.

Por exemplo

Termino primeiro a tarefa mais importante e deixo o resto.

59Ideias e planejamento

Stakeholder

Interessado

Qualquer pessoa com interesse num projeto ou produto: usuários, clientes, equipe, diretoria.

Por exemplo

Antes de começar precisamos entender o que cada interessado quer.

60Ideias e planejamento

Conversion

Conversão

Quando o usuário completa a ação desejada (cadastro, compra, assinatura): métrica-chave do produto.

Por exemplo

Melhoramos a conversão de cadastro redesenhando a página.

64Backend e dados

Schema

Esquema

Define a estrutura dos dados no banco: quais campos existem e de que tipo cada um é.

Por exemplo

Ao desenhar o banco, defini primeiro o esquema da tabela de usuários, com id, name e email.

65Backend e dados

Query

Consulta

A operação que busca dados no banco, normalmente com SQL ou outra linguagem de consulta.

Por exemplo

Consulto com SQL o usuário em que id = 1.

66Backend e dados

ORM

Mapeamento objeto-relacional

Operar o banco pelo código da sua linguagem em vez de escrever SQL na mão.

Por exemplo

Crio usuários pelo ORM em vez de escrever SQL complexo à mão.

Drizzle ORM

67Backend e dados

Cache

Guardar temporariamente os dados mais usados para o sistema responder mais rápido.

Por exemplo

Guardo os resultados das palavras populares no cache para aparecerem mais rápido.

68IA e prompting

Vector Database

Banco vetorial

Um banco feito para armazenar e recuperar vetores, comum em apps de IA como busca semântica.

Por exemplo

Guardo o vetor de cada palavra num banco vetorial para fazer busca semântica depois.

Cloudflare Vectorize

69Backend e dados

File Storage

Armazenamento de arquivos

Um serviço para guardar imagens, áudio, vídeo e outros arquivos.

Por exemplo

Envio os áudios de pronúncia para o armazenamento na nuvem para o app reproduzir.

70Rede e protocolos

HTTP

O protocolo base para transmitir dados na internet; define como cliente e servidor conversam.

Por exemplo

Quando digito uma URL no navegador, envio uma requisição ao servidor por HTTP.

MDN HTTP

71Rede e protocolos

Request

Requisição

Os dados e instruções que o cliente envia ao servidor, geralmente com URL, método e parâmetros.

Por exemplo

Envio uma requisição ao servidor para obter a lista de palavras de hoje.

MDN HTTP Methods

72Rede e protocolos

Response

Resposta

Os dados e o resultado que o servidor devolve depois de receber uma requisição.

Por exemplo

O servidor devolve uma resposta JSON com a palavra e o significado.

73Rede e protocolos

Endpoint

O endereço de acesso de uma função específica da API; cada função costuma ter seu endpoint.

Por exemplo

Chamo o endpoint /v1/words para obter a lista de palavras.

74Rede e protocolos

HTTP Method

Método HTTP

Declara qual operação a requisição faz; os comuns são GET, POST, PUT e DELETE.

Por exemplo

Uso POST para enviar uma palavra nova ao servidor.

MDN HTTP Methods

75Rede e protocolos

Status Code

Código de status

O número de três dígitos que o servidor devolve, indicando se a requisição deu certo.

Por exemplo

200 significa que deu certo; um 404 provavelmente indica URL errada.

MDN Status Codes

76Rede e protocolos

JSON

Um formato de dados leve e legível, muito usado para passar dados entre frontend e backend.

Por exemplo

Os dados de palavras devolvidos pela API costumam ser JSON.

MDN JSON

77Rede e protocolos

Webhook

Quando um evento acontece, o servidor envia dados para uma URL que você configurou, sem você precisar consultar.

Por exemplo

Depois do pagamento, o sistema avisa meu servidor por um webhook.

78Código e versões

SDK

Um kit de ferramentas pronto que facilita chamar as funções de outro serviço sem escrever tudo.

Por exemplo

Com o SDK da OpenAI, poucas linhas chamam a API dela.

79Identidade e segurança

Authentication

Autenticação

Confirma quem você é e prova que pode acessar um sistema ou recurso.

Por exemplo

Depois que faço login, o sistema confirma minha identidade pela autenticação.

Better Auth

80Identidade e segurança

Authorization

Autorização

Depois de confirmar a identidade, decide a quais recursos e ações você tem direito.

Por exemplo

Mesmo logado, sem autorização não posso apagar dados de outra pessoa.

81Depurar e testar

Error

Erro

Um problema que ocorre enquanto o programa roda e faz algum recurso parar de funcionar.

Por exemplo

Vi um TypeError, o que indica um erro de tipos no código.

82Depurar e testar

Debugging

Depuração

O processo de localizar, analisar e corrigir problemas para o programa voltar a funcionar.

Por exemplo

Revisei o erro linha a linha e finalmente achei e corrigi o problema.

83Depurar e testar

Test Case

Caso de teste

Um cenário e passos específicos criados para verificar se um recurso funciona.

Por exemplo

Escrevi um caso de teste: com senha errada deve aparecer um aviso.

84Depurar e testar

Test Coverage

Cobertura de testes

A parcela do código alcançada pelos testes; mede se testar está sendo abrangente.

Por exemplo

A cobertura do meu projeto é 80%, então quase todo o código central está testado.

Vitest

85Publicação e segurança

CI

Após cada commit, compilar e testar automaticamente para achar problemas cedo.

Por exemplo

Depois que faço push no GitHub, a CI roda os testes e me informa.

GitHub Actions

86Publicação e segurança

CD

Depois que os testes passam, publicar automaticamente em produção ou staging para lançar mais rápido.

Por exemplo

Quando os testes passam, o CD publica a última versão na Vercel.

87Publicação e segurança

Production

Produção

O ambiente real usado pelos usuários, em oposição ao de desenvolvimento, e normalmente mais estável e seguro.

Por exemplo

Depois dos testes, colocamos o app em produção e abrimos ao público.

88Publicação e segurança

Monitoring

Monitoramento

Acompanhar após o lançamento o estado do app e métricas-chave, como taxa de erro e tempo de resposta.

Por exemplo

Configurei monitoramento, vi a taxa de erros subir de madrugada e investiguei.

Workers Observability

89Publicação e segurança

Scaling

Escala

Quando o tráfego cresce, adicionar recursos de computação ou melhorar a arquitetura para aumentar a capacidade.

Por exemplo

Com mais usuários, passamos de 1 para 3 servidores para manter a velocidade.

90Ideias e planejamento

Milestone

Marco

Um ponto importante do projeto, que costuma marcar se uma meta da fase foi concluída.

Por exemplo

Nosso primeiro marco é terminar o MVP; o segundo, o lançamento beta.

91Ideias e planejamento

Timeline

Cronograma

O planejamento do início ao fim do projeto, incluindo os pontos-chave de cada fase.

Por exemplo

Planejamos terminar o MVP em 3 meses; esse é o cronograma do projeto.

92Ideias e planejamento

Resource

Recurso

As pessoas, o tempo, o dinheiro e as ferramentas disponíveis para concluir um projeto.

Por exemplo

Sou a única pessoa neste projeto, então tempo e recursos precisam ser bem distribuídos.

93Ideias e planejamento

Collaboration

Colaboração

Várias pessoas trabalhando juntas: comunicar, dividir tarefas, compartilhar arquivos e sincronizar o progresso.

Por exemplo

Colaboro com um colega neste projeto pelo GitHub.

94Ideias e planejamento

Documentation

Documentação

Arquivos que registram informações do projeto: instruções, guias de desenvolvimento, docs de API e mais.

Por exemplo

Escrevi um README para as pessoas entenderem o projeto rápido.

Markdown para HTML

95Código e versões

License

Licença

O acordo legal que diz como outros podem usar, modificar e distribuir seu código.

Por exemplo

Escolhi a licença MIT para que outros usem meu projeto livremente.

Choose a License

96Código e versões

Open Source

Código aberto

Código público que qualquer pessoa pode ver, usar, modificar e contribuir, geralmente mantido por uma comunidade.

Por exemplo

Abri o projeto no GitHub, esperando mais feedback e contribuições.

Open Source Guides

97Ideias e planejamento

User Feedback

Feedback do usuário

Opiniões, sugestões e problemas relatados pelos usuários; base importante para melhorar o produto.

Por exemplo

Um usuário disse que a pronúncia não era clara, então melhorei o áudio.

Publicar uma página

98Ideias e planejamento

Analytics

Análise de dados

Coletar e analisar dados de comportamento dos usuários para entender o uso do produto e decidir.

Por exemplo

A análise mostrou que a maioria usa o celular, então otimizei o mobile primeiro.

99Publicação e segurança

Release

Lançamento de versão

Publicar oficialmente uma versão nova ou melhorada para os usuários.

Por exemplo

Terminamos os testes, já podemos lançar a v1.0.0!