VideoStudy/COMO_RODAR.md

🚀 COMO RODAR - PASSO A PASSO

✅ O QUE FOI CORRIGIDO

• ✅ Bootstrap CSS adicionado (agora com formatação)
• ✅ Navbar adicionado (cabeçalho da página)
• ✅ Botões melhorados (maior, com emojis)
• ✅ Progress bar animada
• ✅ Debug logs detalhados
• ✅ Tratamento de erros melhorado
• ✅ Mensagens claras em português/emojis

🎯 INSTRUÇÕES EXATAS

Passo 1: Abra o Terminal 1

cd /mnt/c/vscode/VideoStudy.app/VideoStudy.API
dotnet run

Você deve ver:

Building...
...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
Press CTRL+C to quit

✅ Não feche este terminal! Deixe rodando.

---

Passo 2: Abra NOVO terminal (não o mesmo)

cd /mnt/c/vscode/VideoStudy.app/VideoStudy.Desktop/VideoStudy.Desktop
dotnet run

Você deve ver:

Building...
...
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5001
Press CTRL+C to quit

✅ Não feche este terminal! Deixe rodando.

---

Passo 3: Abra o Browser

Navegue para:

http://localhost:5001

Agora você deve ver:

• ✅ Navbar escura com "📺 VideoStudy"
• ✅ Card branco com formulário
• ✅ Campo de input para URL
• ✅ Seletor de idioma
• ✅ Botões "⚡ Fast Mode" e "🧠 Advanced Mode"
• ✅ Botão "📊 Analyze Video"
• ✅ Botão "🔄 Clear"

---

🧪 TESTAR A APP

1. Preencha os Dados

YouTube URL:  https://www.youtube.com/watch?v=dQw4w9WgXcQ
Language:     Portuguese
Mode:         ⚡ Fast Mode (padrão)

2. Clique em "📊 Analyze Video"

3. Veja o que Acontece

Você deve ver:

• ✅ Barra de progresso animada (verde)
• ✅ Status mudando: "Preparing..." → "Connecting..." → "Parsing..." → "Analysis complete!"
• ✅ Debug logs aparecendo em tempo real
• ✅ Card com resultados (título, análise, etc)

Exemplo de logs:

[10:15:34] 🚀 Starting video analysis...
[10:15:34] 📝 API URL: http://localhost:5000/api/analyze
[10:15:34] ⚙️  Mode: fast | Language: pt
[10:15:34] 📡 API Response: 200
[10:15:34] ✓ Received response (456 bytes)
[10:15:34] ✓ Successfully deserialized response

---

❌ ERROS? AQUI ESTÁ A SOLUÇÃO

Erro: "Cannot connect to API"

Solução:

1. Abra DOIS terminais separados
2. Terminal 1: cd VideoStudy.API && dotnet run
3. Espere a mensagem "Now listening on: http://localhost:5000"
4. Terminal 2: cd VideoStudy.Desktop/VideoStudy.Desktop && dotnet run
5. Espere a mensagem "Now listening on: http://localhost:5001"
6. Só depois abra o browser

Erro: "Unhandled error has occurred"

Solução:

1. Pressione F12 no browser (abre developer tools)
2. Vá para aba "Console"
3. Procure pela mensagem vermelha
4. Copie e compare com os Debug Logs da app

Erro na porta (porta já está em uso)

Verifique:

# Encontrar processos nas portas
netstat -ano | findstr :5000   # Windows
netstat -ano | findstr :5001   # Windows

lsof -i :5000                  # Linux/Mac
lsof -i :5001                  # Linux/Mac

Se algo tiver rodando, feche:

# Windows
taskkill /PID <PID> /F

# Linux/Mac
kill -9 <PID>

Erro ao build

Solução:

dotnet clean
dotnet restore
dotnet build

---

🔍 ENTENDER OS DEBUG LOGS

Cada log tem um emoji que indica:

Emoji	Significado
🚀	Iniciando operação
📝	Informação sobre config
⚙️	Configuração
📡	Conexão com API
✓	Sucesso
✗	Erro
🧠	Processamento
📊	Resultado

---

💡 DICAS

1. Limpar cache do browser: Ctrl+Shift+Delete (ou Cmd+Shift+Delete no Mac)
2. Recarregar página: Ctrl+F5 (hard refresh)
3. Ver logs da API: Olhe o terminal onde você rodou dotnet run da API
4. Debug logs da app: Role para baixo na página, verá a seção "🔍 Debug Logs"

---

✅ CHECKLIST ANTES DE RODAR

• Abri DOIS terminais (não um com abas)?
• Terminal 1 está roando a API (Now listening on: http://localhost:5000)?
• Terminal 2 está rodando o Desktop (Now listening on: http://localhost:5001)?
• Abri o browser em http://localhost:5001?
• A página tem formatação (cores, botões grandes)?
• Há uma barra de navegação escura no topo?

---

📞 INFORMAÇÕES DO SISTEMA

Framework:    .NET 8.0 LTS
Build Status: ✅ SUCCESS
Portas:
  - API:     http://localhost:5000
  - Desktop: http://localhost:5001

---

🎉 SUCESSO!

Se tudo deu certo, você verá:

1. ✅ Página com formatação (não mais "sem CSS")
2. ✅ Navbar escura
3. ✅ Botões grandes e coloridos
4. ✅ Formulário bem organizado
5. ✅ Progress bar ao enviar
6. ✅ Resultados aparecem
7. ✅ Debug logs mostram cada etapa

Parabéns! FASE 1 ✅ está funcionando!

---

Data: 2026-02-06 Status: ✅ Corrigido e Testado