📝 Cap 19: Cadastro de Treinador: Formulários

🎯 Objetivo da Aula: Ao final desta aula, você saberá criar formulários de entrada de dados (Login, Cadastro). Você aprenderá a validar se o usuário digitou as informações corretamente e como dar um feedback visual (mensagens de erro) caso ele esqueça de preencher algo.

---

🏢 O Cenário Prático (Seu Desafio): Para entrar na Arena, o jogador precisa se cadastrar. O problema é que muitos digitam nomes curtos demais ou esquecem do e-mail. Seu desafio é criar a Tela de Inscrição: se o nome tiver menos de 3 letras, o app deve avisar: “Nickname muito curto!” e bloquear o botão de envio.

---

🧠 Fundamentos: A Teoria Traduzida

📖 Dicionário do Programador

• TextField: É a “Caixa de Texto” onde o usuário escreve.
• Validação: É o processo de checar se o que foi escrito faz sentido (ex: e-mail tem @?).
• isError: É uma propriedade do Compose que, quando verdadeira, deixa o campo com uma borda vermelha de erro.

🎨 Padrão de Organização

Telas de formulário devem morar na pasta ui/screens/. Use o nome CadastroScreen.kt.

graph TD
    A["Jogador digita Nickname"] --> B{Tem 3 letras?}
    B -->|Não| C["Mostra Erro em Vermelho"]
    B -->|Sim| D["Libera Botão Confirmar"]

---

📦 Imports Necessários

Antes de copiar os códigos abaixo, adicione estes imports no topo do seu arquivo .kt:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp

---

📖 Exemplo Passo a Passo: Validando o Nome

1. Crie uma variável de estado para o texto.
2. Crie uma variável de “Erro” que depende do tamanho do texto.

@Composable
fun CadastroScreen() {
    var nickname by remember { mutableStateOf("") }
    
    // Regra: Erro se tiver menos de 3 letras e NÃO estiver vazio
    val temErro = nickname.length < 3 && nickname.isNotEmpty()

    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = nickname,
            onValueChange = { nickname = it },
            label = { Text("Nome do Treinador") },
            isError = temErro,
            supportingText = {
                if (temErro) Text("O nome deve ter no mínimo 3 letras", color = Color.Red)
            }
        )
        
        Button(
            onClick = { /* Próximo Passo */ },
            enabled = nickname.length >= 3 // Só clica se o nome estiver OK
        ) {
            Text("Confirmar Inscrição")
        }
    }
}

---

🛠️ Prática Obrigatória 1: Adicione um campo de “E-mail” ao seu formulário. Crie uma regra de validação: o botão só pode ser clicado se o e-mail contiver o símbolo @.

---

🛠️ Prática Obrigatória 2: Configure o teclado do campo de e-mail para mostrar o símbolo @ em destaque. (Dica: use keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)).

---

🔑 Gabarito Passo a Passo:

val emailValido = email.contains("@")
val formularioPronto = nickname.length >= 3 && emailValido

Button(
    onClick = { },
    enabled = formularioPronto
) {
    Text("Enviar")
}

📤 Instruções de Entrega (Microsoft Teams):

1. Envie o código da sua tela de cadastro completa.
2. Nomeie como: Gamer_SeuNome_Cap19.kt.
3. Submeta no canal de tarefas.

---

⬅️ Voltar para a Home

⬅️ Anterior Próximo ➡️