# 🚀 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

```bash
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)

```bash
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:**
```bash
# 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:
```bash
# Windows
taskkill /PID <PID> /F

# Linux/Mac
kill -9 <PID>
```

### Erro ao build

**Solução:**
```bash
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