1. Básico do técnico
1.1. Servidor, Cliente, Front, Back
1.1.1. Cliente, servidor
1.1.1.1. Você (cliente) escreve uma requisição para o servidor
1.1.1.2. O navegador precisa descobrir seu IP. O endereço é o número de IP. O endereço "www.google.com" é apenas um "apelido" para o endereço real, que é um número
1.1.1.3. Estabelece uma conexão
1.1.1.4. Enviando request
1.1.1.5. Servidor processa a requisição
1.1.1.6. Enviando response (servidor envia uma resposta de volta)
1.1.1.7. A página é renderizada
1.1.2. Conceitos básicos
1.1.2.1. Conceitos fundamentais web
1.1.2.1.1. Web
1.1.2.1.2. URL
1.1.2.1.3. DNS
1.1.2.1.4. HTTP/HTTPS
1.1.2.1.5. TCP/IP
1.1.2.2. Infraestrutura
1.1.2.2.1. ISPs
1.1.2.2.2. Roteadores
1.1.2.2.3. CDN
1.1.2.2.4. Data Centers
1.1.2.3. Performance
1.1.2.3.1. Latência
1.1.2.3.2. Bandwidht
1.1.2.3.3. Caching
1.1.2.3.4. Compressão
1.1.3. Processo de renderização navegador
1.1.3.1. Download html > parse html > parse CSS > render tree > layout > paint > composite
1.1.4. Performance
1.1.4.1. Lighthouse (no Chrome)
1.1.4.1.1. Inspecionar > Lighthouse > Analyze page load
1.2. VPS, APIs e Protocolos
1.2.1. Protocolos
1.2.1.1. "idiomas" que os computadores usam para se comunicar entre eles
1.2.1.2. Cada protocolo tem regras específicas sobre como os dados devem ser formatados e transmitidos.
1.2.1.3. Como idiomas humanos, dispositivos precisam "falar" o mesmo protocolo para se entenderem.
1.2.1.4. Tipos
1.2.1.4.1. HTTP
1.2.1.4.2. HTTPS
1.2.1.4.3. FTP
1.2.1.4.4. SMTP
1.2.1.4.5. TCP
1.2.1.4.6. UDP
1.2.1.5. Quadro resumo
1.2.1.5.1. -
1.2.1.6. Camadas
1.2.1.6.1. Aplicação
1.2.1.6.2. Transporte
1.2.1.6.3. Rede
1.2.1.7. MCP
1.2.1.7.1. É um protocolo de mensagens.
1.2.1.7.2. Padroniza o diálogo entre sistemas.
1.2.1.7.3. Garante interoperabilidade.
1.2.1.7.4. Não é um protocolo “universal” como HTTP, mas sim uma convenção adotada em determinados projetos e ferramentas (Cursor, ChatDev, OpenAgents, AutoGen, etc.)
1.2.2. VPS
1.2.2.1. Virtual Private Server - Servidor virtual privado
1.2.2.2. Sua VPS é completamente isolada de outras. Recursos garantidos e performance previsível
1.2.2.3. O que é?
1.2.2.3.1. VPS é um servidor virtual que simula um servidor físico dedicado
1.2.2.3.2. Você tem recursos garantidos (CPU, RAM, storage) e controle total
1.2.2.3.3. É como ter seu próprio computador na nuvem, mas mais barato que um servidor dedicado.
1.2.2.4. Comparação
1.2.2.4.1. Compartilhada: €2-10 mas é limitada
1.2.2.4.2. VPS: €10-100/mês (equilibrio ideal)
1.2.2.4.3. Dedicado: €100+/mês (máxima performance)
1.3. Terminal, IDE e Github
1.3.1. GitHub
1.3.1.1. É uma forma de você armazenar o código no serviço deles
1.3.1.2. Permite colaboração e versionamento
1.3.2. O terminal que aparece no cursor/visual studio code é o mesmo que aparece no windows, macbook, linux quando abrimos o terminal
1.3.2.1. Alguns comandos
1.3.2.1.1. Sistema de arquivos
1.3.2.1.2. NPM
1.3.2.1.3. GIT
1.3.2.1.4. Sistema
1.3.3. Editor de código vs IDE
1.3.3.1. IDE
1.3.3.1.1. Uma IDE oferece recursos como realce de sintaxe, depuração e terminal integrado
1.3.3.1.2. Cursor é uma IDE com IA
1.3.3.1.3. Visual Studio Code (o Cursor nasceu dela)
1.3.3.2. Editor de texto
1.3.3.2.1. Sublime text
1.3.3.2.2. Bloco de notas
1.4. React, Tailwind, TypeScript e Vite
1.4.1. React
1.4.1.1. Uma biblioteca JavaScript popular para construir interfaces de usuário complexas e reativas com componentes.
1.4.2. JavaScript e TypeScript
1.4.2.1. JavaScript: Linguagem original, dinâmica, interpretada, usada em praticamente todo desenvolvimento web.
1.4.2.2. TypeScript: Superset (superconjunto) do JavaScript, criado pela Microsoft. Adiciona tipagem estática e outros recursos avançados ao JavaScript.
1.4.2.3. Erros em tempo de codificação: JavaScript: Detectados em runtime. TypeScript: Detectados em tempo de compilação
1.4.2.4. Ferramentas: JavaScript: Todos os navegadores TypeScript: Node Precisa de compilador TypeScript (tsc)
1.4.3. Tailwind
1.4.3.1. Um framework CSS utilitário que permite estilizar rapidamente seus componentes diretamente no HTML.
1.4.4. Vite
1.4.4.1. Uma ferramenta de build moderna que acelera drasticamente o processo de desenvolvimento frontend
1.5. Dependências, versionamento e comandos
1.5.1. Open source vs proprietário
1.5.2. Dependências e bibliotecas
1.5.2.1. Características
1.5.2.1.1. Precisam ser instalados no terminal
1.5.2.1.2. Quando você instala uma biblioteca, você adiciona ela ao package.json
1.5.2.1.3. O package.json consolida todas as minhas instalações e a versão de cada instalação
1.5.2.1.4. Muitas dependências podem tornar a aplicação lenta. Usar apenas o que for necessário
1.5.2.2. Dependências são bibliotecas de código externas que seu projeto usa. Em vez de escrever tudo do zero, você reutiliza código que outros desenvolvedores já criaram e testaram. Isso acelera muito o desenvolvimento e reduz bugs!
1.5.3. Versionamento
1.5.3.1. commit: Initial commit const app = "start";
1.5.3.2. commit: Adiciona botão de login const button = ‹Button />;
1.5.3.3. commit: Cria branch ' feature' // branch action
1.5.3.4. commit: Integra 'feature' na main // merge
1.5.4. Melhoria do código
1.5.4.1. best.codandosemcodar.com.br
1.5.4.2. Eliminar código não utilizado (dead code)
1.5.4.2.1. Analise o projeto e identifique: 1) Componentes que foram criados mas nunca importados renderizados, 2) Funções declaradas que nunca são chamadas, 3) Importações que não são utilizadas, 4) Variáveis de estado (useState) que nunca mudam ou nunca são lidas, 5) Código comentado sem explicação clara de por que foi mantido. Sugira a remoção desses elementos para melhorar a manutenibilidade e performance do
1.5.4.3. DRY
1.5.4.3.1. Princípio DRY (Don't Repeat Yourself) Identifique padrões de código duplicados no projeto. Procure por funções, componentes ou blocos de código que aparecem em vários lugares com pouca ou nenhuma alteração. Sugira refatorações para criar componentes reutilizáveis, hooks personalizados ou funções utilitárias que possam substituir essa
2. AI Coding: fundamentos
2.1. Principais ferramentas
2.1.1. Lovable
2.1.2. Bolt
2.1.3. v0
2.1.3.1. Cria a partir de um print screen
2.1.4. Cursor
2.2. Melhorando design da aplicação
2.2.1. Webcrumbs
2.2.2. Tempolabs
2.3. Cursor
2.3.1. Passando do GitHub para o cursor
2.3.1.1. git clone url
2.3.2. Colar documentação
2.3.2.1. Cursor > cursor settings > features > add new doc
2.3.3. Arquivo gitignore
2.4. Vercel
2.4.1. Passos para publicar o projeto:
2.4.1.1. Subir o código novamente para o GitHub
2.4.1.2. Vercel -> Add New -> Project -> Import Git Repository
2.4.1.3. Nas configurações do projeto deve adicionar as credenciais
2.5. Ajustes finos na interface com o Cursor
2.5.1. Exemplo de prompt
2.5.1.1. Atualmente na página de login, está apenas o login. Crie uma landing page, moderna, com base no airbab, que mostre tudo o que a aplicação faz, e que tenha um botão para login. Assim o usuário conseguirá entender onde está fazendo login
2.5.2. Quando o prompt dá errado?
2.5.2.1. Pedir para voltar para o passo anterior ao erro. Também pode pedir para voltar ao estágio do último commit
2.5.2.2. Depois que voltar, melhorar o prompt, já levantando possíveis erros
2.5.3. Alteração de imagens
2.5.3.1. Pasta public
2.6. Login com Google
2.6.1. Prompt que ele utilizou: Gostaria de implementar autenticação com o Google, utilizando Supabase. poderia fazer isso com base na documentação @Supabase |
2.6.1.1. O Cursor realiza ajustes no código para que seja possível
2.6.1.2. # Configuração da Autenticação com Google no Supabase. Este guia explica como configurar a autenticação com Google para seu projeto ## 1. Criar um projeto no Google Cloud Platform 1. Acesse o [Console do Google Cloud] (https://console.cloud.google. com/) 2. Clique em "Criar Projeto" ou selecione um projeto existente 3. Dê um nome ao projeto (ex: "Diário de Viagens") 4. Clique em "Criar"
2.6.1.2.1. -
2.6.1.2.2. -
2.6.1.2.3. O nome do projeto é importante porque quando o usuário clicar para "acessar com o Google" é o nome que ele vai ver
2.6.1.3. ## 2. Configurar as credenciais OAuth 1. No menu lateral, navegue até "APIs e Serviços" > "Credenciais" 2. Clique em "Configurar tela de consentimento OAuth" - Selecione "Externo" como tipo de usuário - Clique em "Criar" 3. Preencha as informações necessárias: - Nome do app: "Diário de Viagens" - Email de suporte do usuário: seu email - Domínios autorizados: deixe em branco por enquanto - Informações de contato do desenvolvedor: seu email - Clique em "Salvar e continuar" 4. Na seção "Escopos", clique em "Salvar e continuar" (não precisamos adicionar escopos adicionais) 5. Na seção "Usuários de teste", clique em "Salvar e continuar" (não precisamos adicionar usuários de teste) 6. Revise as informações e clique em "Voltar para o painel"
2.6.1.3.1. -
2.6.1.3.2. -
2.6.1.3.3. -
2.6.1.4. ##3. Criar credenciais OAuth Em "Origens JavaScript autorizadas", adicione: http://localhost:5173* (para desenvolvimento local) -'https://seu-dominio.com' (para produção, quando tiver) 6. Em "URIs de redirecionamento autorizados", adicione: http://localhost:5173/auth/callback (para desenvolvimento local) https://seu-dominio.com/auth/callback (para produção)
2.6.1.5. No fim disso vai ser gerado um ID do cliente e uma chave secreta que deves ser colados no Supabase
2.6.1.5.1. -
2.7. Entendendo a estrutura do projeto
2.7.1. Estrutura de pastas principal de um projeto Vite
2.7.1.1. A estrutura de pastas de um projeto Vite é organizada para oferecer uma experiência de desenvolvimento rápida e eficiente
2.7.1.2. O Vite.js é um bundler (empacotador) e servidor de desenvolvimento que proporciona um ambiente de desenvolvimento extremamente rápido com Hot Module Replacement (HMR).
2.7.1.2.1. Agrupa múltiplos arquivos e recursos (JavaScript, CSS, imagens, fontes, etc.) em um ou poucos arquivos finais otimizados para serem carregados mais rapidamente pelo navegador.
2.7.1.3. A estrutura padrão segue convenções modernas para organização de código front end
2.7.1.4. Pastas
2.7.1.4.1. node_modules
2.7.1.4.2. public
2.7.1.4.3. src
2.7.1.4.4. tests
2.7.1.4.5. dist
2.7.1.4.6. arquivos de configuração
2.7.1.5. Nome da arquitetura
2.7.1.5.1. Arquitetura Modular Front-End
2.7.1.5.2. Estrutura de Projeto Modularizada (ou Clean Architecture Front-End)
2.7.1.5.3. Padrão Vite/CRA/Next
2.7.2. Exemplo de prompt
2.7.2.1. “Crie para mim um projeto em Vite com React, TypeScript, Tailwind CSS e configuração do ESLint e Prettier. Explique os comandos necessários, a estrutura de pastas e indique as melhores práticas para organizar os arquivos.”
2.7.3. Tecnologias
2.7.3.1. -
2.7.3.2. Core
2.7.3.2.1. React 18
2.7.3.2.2. TypeScript
2.7.3.2.3. Vite.js
2.7.3.3. Estilização
2.7.3.3.1. Tailwind CSS
2.7.3.3.2. shadcn/ui
2.7.3.3.3. Framer Motion
2.7.3.4. Utilidades
2.7.3.4.1. React Router
2.7.3.4.2. Lucide Icons
2.7.3.4.3. Class Variance Authority
2.8. Exemplos de prompts
2.8.1. Passo a passo
2.8.1.1. Solicite tarefas divididas em etapas claras, com objetivos específicos para cada uma.
2.8.1.2. Crie um componente de formulário de contato em React. Etapa 1: Estrutura básica do formulário com campos nome, email e mensagem. Etapa 2: Adicione validação para cada campo. Etapa 3: Implemente o envio do formulário com feedback visual.
2.8.2. Explicar e depois codificar
2.8.2.1. Peça primeiro uma explicação conceitual e depois o código implementado.
2.8.2.2. Explique como funcionam os React Hooks e depois mostre um exemplo prático de como criar um hook personalizado para gerenciar o estado de um dark mode.
2.8.3. Contexto e risco
2.8.3.1. Forneça detalhes sobre o projeto, tecnologias usadas e limitações existentes.
2.8.3.2. Estou criando uma aplicação de e-commerce usando React, Redux e Tailwind. Preciso de um componente de carrinho de compras que seja responsivo e mantenha os itens mesmo após recarregar a página. Usamos TypeScript e queremos manter uma estrutura limpa de código.
2.8.4. Revisão de código
2.8.4.1. Peça análise e melhoria de código existente, identificando problemas e propondo otimizações.
2.8.4.2. Revise este componente React e sugira melhorias para performance, legibilidade e boas práticas: function UserProfile({user, loading}) { if (loading) return <div>Loading...</div> return <div>{user.name}</div> }
2.8.5. Prompts de Debugging
2.8.5.1. Descreva um problema específico, o comportamento esperado e o erro encontrado.
2.8.5.2. Estou recebendo um erro "Cannot read property 'map' of undefined" neste componente React quando tento renderizar uma lista de produtos. O componente recebe dados de uma API e deveria mostrar os produtos, mas falha mesmo quando tenho certeza que os dados estão chegando corretamente.
2.9. Transformando a aplicação em PWA (Progressive Web App)
2.9.1. Opção de instalar o aplicativo mesmo ele sendo web
2.9.2. Exemplo de prompt
2.9.2.1. Transforme essa aplicação em PWA (Progressive Web App). Ao executar, me explique todas as pastas que foram criadas
2.9.2.2. Transforme essa aplicação em PWA (Progressive Web App). Mas antes me dê 3 opções de como fazer isso
2.9.2.2.1. Configuração manual básica
2.9.2.2.2. Utilizar Vite PWA
2.9.2.2.3. Usar workbox
2.9.3. Verificando se está funcionando
2.9.3.1. Abra no Google Chrome e clique em inspecionar > Application
2.9.3.2. Em application, quando clicar em manifest, service workers e storage tem que aparecer algo
2.9.4. Botão restore checkpoint
2.10. Criando interface com o Claude
2.10.1. Tirar print da tela do celular
2.10.1.1. Prompt: recrie este design pixel por pixel
2.10.1.2. O claude vai gerar um arquivo HTML. Importar arquivo HTML para dentro do Cursor
2.10.1.3. Prompt: Altere o design system da aplicação para usar o design do designair.html Mantendo as funcionalidades existentes, aquelas que não existem, coloque uma tag escrita "em breve"
2.10.1.4. Essa parte é ideal no início do projeto para não quebrar funcionalidades
2.11. Colocando IA na aplicação
2.11.1. Prompt usado
2.11.1.1. Na pagina de roteiros, crie uma simulação de um gerador de roteiros, e dentro dele:
2.11.1.2. 1) Coloque uma área de chat (semelhante a área de chat do ChatGPT).
2.11.1.3. 2) Ao clicar em um botão chamado "Gerar", ele vai criar, com um typewriting effect, um roteiro.
2.11.1.4. 3) Permita copiar o roteiro com um botão de copiar.
2.11.1.5. O objetivo é que seja simulado mesmo, porque futuramente vamos substituí-lo
2.11.2. Prompt usado na implementação
2.11.2.1. Agora faça com que esse roteiro seja gerado através da integração com uma API da OpenAl. Então o input seria a mensagem enviada pelo o usuário no chat, e o output o roteiro, semelhante ao roteiro gerado na simulação
2.11.2.2. Cursor vai gerar um arquivo OpenAi.ts onde estará o prompt para o ChatGPT
2.11.2.3. Verificar se a chave de API não está exposta
2.12. Ferramentas de análise
2.12.1. Google Analytics
2.12.2. Clarity
2.12.3. PostHog
2.12.4. As três ferramentas serão implementadas usando o Google Tag Manager
2.12.4.1. Instalar no head e no body do arquivo index.html
3. Cursor + MCP
3.1. Configurando MCP do Supabase no Cursor
3.1.1. Criando projeto direto no Cursor
3.1.1.1. npm create vite@latest
3.1.1.1.1. Ele vai perguntar: nome do projeto framework: react variant: typescript
3.1.1.1.2. Ele vai pedir para rodar estes comandos: cd app npm install npm run dev
3.1.2. Configurando MCP do Supabase
3.1.2.1. Documentação Supabase
3.1.2.1.1. https://supabase-com.translate.goog/docs/guides/getting-started/mcp?_x_tr_sl=en&_x_tr_tl=pt&_x_tr_hl=pt&_x_tr_pto=tc&_x_tr_hist=true
3.1.2.2. Dentro da pasta app, criar novo arquivo cursor/mcp.json
3.1.2.2.1. arquivo mcp.json dentro da pasta cursor
3.1.2.3. No Supabase clicar em account preferences no canto superior direito e depois em access tokens
3.1.2.3.1. -
3.1.2.4. Para verificar se está ativo: cursor > ajustes > cursor settings > MCP quando liga o MCP tem que ficar verdinho
3.1.3. Prompt inicial
3.1.3.1. Gere um schema SQL para a aplicação abaixo: Explicar o que está criando. Descrever os elementos principais. Prevê níveis de acesso e o que cada nível pode fazer Prevê funcionalidades
3.1.3.1.1. Segundo o chatgpt, um bom prompt para gerar um Schema SQL deve ter:
3.1.3.1.2. 1. Descrição do sistema
3.1.3.1.3. 2. Principais entidades e suas propriedades
3.1.3.1.4. 3. Relacionamentos entre as entidades
3.1.3.1.5. 4. Regras de negócio relevantes
3.1.3.1.6. 5. Tecnologias ou formatos desejados
3.1.3.2. Depois: Gostaria de implementar alguams tabelas no banco de dados desse projeto. Use o DBML enviado para criar, e crie as políticas RLS necessárias
3.2. Autenticação
3.2.1. Antes de passar o prompt ele eliminou as pastas intermediárias para evitar problemas no MCP do Supabase (ele tende a criar os arquivos na pasta mais externa)
3.2.2. Prompt: Implemente autenticação na aplicação. Ao logar, aparecerá apenas um box com o tipo de acesso do usuário. Não faça mais nada além de implementar a autenticação do Supabase
3.3. MCP da Magic UI
3.3.1. Comando: npx@magicuidesign/cli@latestinstallcursor (rodar o comando na pasta principal)
3.3.1.1. Documentação: https://magicui.design/docs/mcp
4. Claude Code + Cursor
4.1. Introdução
4.1.1. Você instala o Claude Code no Cursor. Qualidade do código superior à do Cursor
4.1.2. Comando para instalar: npm install -g @anthropic-ai/claude-code e depois: claude
4.1.3. Preço
4.1.3.1. $20 por mês. 40 mensagens a cada cinco horas