cerebro-vip INEMA.CLUB
início › INEMA.DEV Desenvolvimento

Resumo do Episódio 3 do mini curso Cursor + GitHub, focado em…

INEMA.DEV Desenvolvimento · 2025-07-29 · ~5 min · ver no Telegram ↗

INEMA

Resumo completo com tópicos e exemplos – Episódio 3: Como Rodar um App Localmente no Cursor

Este episódio fecha a trilogia do mini curso Cursor + GitHub com foco total na execução local de aplicações. Tommy mostra passo a passo como rodar um app diretamente no seu computador, usando o terminal integrado ao Cursor com assistência da IA.

Tópicos abordados com exemplos e explicações⌗

  1. Resumo dos episódios anteriores
  • Projeto foi exportado do Lovable para o GitHub (como um Google Drive de código).
  • Depois, foi clonado para o desktop via Cursor.
  • Problema: toda vez que se fazia uma alteração, era preciso enviar de volta ao GitHub e esperar o Lovable sincronizar para ver as mudanças.
  1. Por que rodar localmente?
  • Evita o atraso da sincronização.
  • Permite visualizar mudanças em tempo real, como desenvolvedores profissionais fazem.
  1. Entendendo o Terminal
  • Interface de linha de comando usada pelo Cursor para executar ações.
  • Comandos como ls mostram os arquivos da pasta atual.
  • É poderoso, mas perigoso: não digite comandos sem saber.
  • Cursor usa o terminal internamente — você não precisa entender tudo, mas é bom saber o que está acontecendo.
  1. Rodando o app local com ajuda da IA
  • Tommy digita no chat: “run the app locally for me”.
  • A IA analisa o tipo de projeto, detecta dependências e executa comandos como npm install e npm run dev.
  • Exemplo: O jogo Pong é executado automaticamente.
  1. Entendendo localhost e portas
  • localhost:8081 é o endereço local do app, visível somente no computador de Tommy.
  • As portas (como 8081, 8082...) permitem rodar múltiplos sites localmente, cada um com seu "endereço interno".
  • Isso simula como seria o app rodando em um servidor real.
  1. Alterações com feedback imediato
  • Tommy muda o esquema de cores para verde: “make the app have a green color scheme”.
  • A IA aplica as mudanças.
  • O resultado é exibido imediatamente no navegador, sem precisar enviar ao GitHub ou Lovable.
  1. Importância do Prompt
  • Pedidos vagos (ex: "deixa tudo verde") dificultam a resposta da IA.
  • Pedidos específicos (ex: "mude o fundo da caixa 'ready to play' para verde") geram resultados melhores.
  1. Push para GitHub e atualização no Lovable

  • Após confirmar as alterações localmente:

    • Commit é feito: “implement green color scheme”.
    • Push é realizado no GitHub.
    • Lovable sincroniza com GitHub e mostra as novas mudanças.
  1. Considerações sobre bancos de dados externos (Supabase)
  • Supabase não faz parte do código.
  • Se o app depende de Supabase, é necessário configurar a conexão manualmente ao rodar localmente.
  • GitHub só armazena arquivos, não o banco de dados.

Conclusão e recomendação prática:⌗

  • Se seu app for simples, com Vite, React, ou criados no Lovable, provavelmente o comando “run locally” com o Cursor funcionará direto.
  • Se envolver banco de dados, você precisará aprender a configurar variáveis de ambiente e conexões externas.

Exemplos práticos mostrados:⌗

Etapa Ação feita
Abrir terminal IA abre terminal no Cursor automaticamente
Rodar app localmente AI detecta npm run dev e inicia o servidor local
Ver app em localhost Navegador abre http://localhost:8081
Alterar cor para verde Prompt genérico foi executado e cor mudou em tempo real
Commit para GitHub Commit com descrição automática foi gerado e enviado
Lovable sincroniza Após o push, Lovable detecta e exibe o app com as novas cores

Resumo completo – Mini Curso GitHub/Cursor Series – Parte 3: Executando Aplicações Localmente ⚡

Resumo geral:

Nesta última parte da série, Tommy mostra como rodar seus aplicativos diretamente no seu computador, eliminando a dependência de ferramentas web como Lovable para testar e ver mudanças. A aula foca no uso do terminal, na execução local com localhost, e na criação de um ciclo de feedback instantâneo — como os desenvolvedores profissionais trabalham no dia a dia.

Tópicos abordados com exemplos e explicações:

  1. O que é o Terminal e por que o Cursor o utiliza
  • O terminal é a interface de linha de comando do sistema operacional.
  • No Cursor, a IA cuida da maior parte dos comandos — você digita menos e entende mais.
  • Permite controle total do que está acontecendo por trás da aplicação.
  1. Como rodar o app localmente com atualizações instantâneas
  • Exemplo: o jogo “Pong” é executado diretamente no navegador.
  • Cada alteração feita no código é refletida de forma imediata, sem atrasos ou necessidade de sincronização externa.
  1. Entendendo localhost e portas
  • O localhost é o seu próprio computador atuando como servidor.
  • Porta 8081 é usada para acessar o app via navegador (ex: http://localhost:8081).
  • Esse método simula como o app será acessado por outros, mas de forma privada/local.
  1. Fluxo completo de desenvolvimento local até o push para GitHub/Lovable

  • Etapas:

    • Abrir o projeto no Cursor.
    • Rodar localmente usando o terminal integrado.
    • Fazer modificações (ex: mudar esquema de cor para verde).
    • Ver mudanças ao vivo no navegador.
    • Confirmar que tudo está certo.
    • Fazer push para o GitHub e sincronizar com Lovable, se necessário.
  1. Exemplo prático demonstrado por Tommy
  • Projeto: “Pong Game”

  • Ações feitas:

    • Rodou localmente em localhost:8081.
    • Mudou o esquema de cores para verde.
    • Viu as mudanças em tempo real no navegador.
  1. Insight principal
  • Trabalhar localmente acelera o desenvolvimento.
  • A resposta é instantânea: faz uma mudança → vê na hora → corrige rápido.
  • Evita depender do tempo de resposta de ferramentas como Lovable ou push remoto no GitHub.
  1. Observação final sobre uso de bancos de dados
  • Se for usar bancos como Supabase, será necessário configurar variáveis, conexões e ambiente local (não abordado neste vídeo).
  • Pode ser explorado em futuros vídeos, caso haja interesse.
  1. Encerramento da série

  • Agora você está equipado para:

    • Clonar repositórios.
    • Usar Cursor com IA e editar código.
    • Executar apps localmente com feedback instantâneo.
    • Sincronizar com GitHub e Lovable.
    • A transição de ferramentas web para ambiente profissional está completa.

Basico Cursor e GitHub - Parte 3

chatgpt.com ↗

1

Recursos

↑ voltar ao topo · ver no Telegram ↗