Navegação e tema

Os quatro ecrãs existem, mas quem entrar na app não tem como chegar a eles: falta a navegação. Esta etapa é curta e muda tudo — no fim, a app tem menu, logo, cores próprias e está pronta para falar mais do que uma língua.

Três coisas diferentes, três sítios diferentes:

O quê	Onde se faz
A navegação — o menu por onde se anda na app	Painel UI ▸ Navegação
O tema — cores, cantos e tipografia	Definições da app ▸ Tema
Os idiomas — as línguas e as frases	Definições da app ▸ Traduções

#O editor de navegação

1. No painel UI, clica em Navegação, mesmo por cima da secção Ecrãs. Abre um separador com o editor.
2. O editor é uma maqueta da barra da app: arrastas menus entre as zonas (esquerda, centro, direita) e vês o resultado no momento.
3. Os três botões de dispositivo no topo — Web (1280px), Tablet (768px), Mobile (390px) — trocam de desenho. Começa no Web.

#Criar os três menus

1. Clica no + da zona da esquerda. Aparece um item novo e o painel Item seleccionado à direita.
2. Escolhe Menu — o tipo que leva a um ecrã.
3. Preenche Nome do menu, escolhe o Ícone e, em Ecrã, o ecrã de destino.
4. Repete para os três.

Nome do menu	Ícone	Ecrã
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Repara no que não está na lista: a Ficha de Conta. É de propósito — chega-se lá clicando numa linha da tabela de contas, não por menu. Um ecrã sem menu continua acessível pela rota e pelo código; a navegação é só a porta da frente.

5. No canto superior direito, escolhe o Menu inicial: Início. É o ecrã que abre quando alguém entra na app sem indicar rota nenhuma.
6. Clica em Gravar — "Navegação gravada."

#O menu do utilizador

Do lado direito da barra há um item especial: o Menu do utilizador. É onde quem usa a app vê o seu nome e sai. Selecciona-o e afina:

• Mostrar o nome e Mostrar o utilizador (login) — o que aparece ao lado do avatar. Sem ícone, o avatar mostra as iniciais do nome.
• Opção «Sair» — deixa O do sistema (traduzido), salvo se quiseres outro texto.

#O logo da app

O logo vive na barra, à esquerda de tudo. Antes de o escolher, é preciso carregá-lo para a app:

1. No painel UI, na secção Assets, clica em Carregar ficheiros e escolhe o teu logo. Um SVG é a melhor escolha: fica nítido em qualquer tamanho e é o único formato que permite enquadrar.
2. Volta ao separador Navegação e clica no logo da maqueta (Editar o logo da app).
3. Em Ícone ou imagem, escolhe o ficheiro que carregaste.
4. Liga Mostrar o nome da app se quiseres o nome escrito ao lado do símbolo.
5. Em Enquadramento na barra, arrasta a imagem para a posicionar e usa a Escala e a Largura da caixa para a dimensionar — "O ficheiro SVG fica intacto — o corte é só visual e reversível." Ajustar à caixa faz o trabalho por ti; Sem enquadramento volta ao início.
6. Fecha em Concluído e Gravar.

#Cada dispositivo tem a sua navegação

Volta ao topo do editor e clica em Mobile (390px). Repara que o desenho é outro — e que aparece um selector novo, Modo:

Modo	O que dá
Barra de topo	A mesma barra do web, encolhida.
Menu hambúrguer	Um botão que abre o menu num painel lateral. É o mais comum em telemóvel.
Barra de acções	Uma barra no fundo do ecrã, com até 5 itens — o padrão das apps móveis.

Monta em Mobile os mesmos três menus (Início, Contas, Oportunidades), escolhe o Modo que preferires e grava. O Menu inicial também é por dispositivo — podes abrir o dashboard no computador e a lista de contas no telemóvel.

#O tema — pintar a app

O Tema pinta a app construída, sem tocar em nenhum ecrã.

1. No topo da barra da app, clica no ícone de engrenagem (Definições da app).
2. No grupo Aparência, escolhe Tema.
3. À esquerda ficam os grupos de cores; à direita, o painel Preview — "Exemplo com os tokens actuais — actualiza em directo". Cada cor que mudas aparece ali no instante.

Grupo	O que pinta
Base	Fundo e texto da app, contornos, campos e o anel de focus.
Superfícies	Cartões e popovers (menus, dropdowns, tooltips).
Cores	As cores semânticas — Primária, Secundária, Destrutiva, Acento, Apagada — e o texto sobre cada uma.
Navegação	As barras de navegação da app. Por omissão seguem as superfícies; é aqui que se aplica o branding.

Para a Gestão de Clientes basta mexer em duas coisas:

1. Em Cores, põe a Primária na cor da tua marca. É a cor dos botões de acção, dos links e do estado activo.
2. Em Navegação, decide se a barra fica clara (a seguir às superfícies, que é o de origem) ou se ganha a cor da marca. Se a pintares, ajusta também o Texto das barras — uma barra escura com texto escuro não se lê.

Cada cor tem um selector visual e um campo hexadecimal (#rrggbb) — escrever ou escolher dá no mesmo. No fim da lista, Forma e tipografia:

• Raio dos cantos — de Sem cantos (0) a Máximo (1rem), em cinco passos.
• Posição dos avisos — em que canto aparecem os avisos (aqueles que o keplin.ui.toast() da etapa anterior mostra).
• Fonte (sans) — a stack de fontes da app.

Grava com Gravar. Para voltar às cores de origem, Repor defaults — repõe no editor, e só fica definitivo quando gravares.

#Os idiomas

A última peça desta etapa é a secção Traduções, no grupo Localização das definições. É uma matriz: uma linha por frase, uma coluna por língua.

Numa app acabada de construir está vazia, e isso é normal: os textos que escreveste nos widgets vivem nos ecrãs. As traduções servem para os textos que o código escreve — e para dar à app uma segunda língua.

Acrescentar uma língua:

1. Clica no + no cabeçalho da matriz.
2. Escolhe a língua em escolher língua… e confirma em Acrescentar língua. A coluna nova nasce vazia.

Criar uma frase:

1. Escreve na última linha, que está sempre à espera ("escrever para criar…").
2. A Chave da frase "(sai da frase)" — é o próprio texto na língua base que a identifica.
3. Preenche as outras colunas com a tradução.

Nos eventos dos ecrãs, a frase usa-se pelo texto:

keplin.ui.toast(keplin.i18n.t("Conta guardada"));

Para meter um valor no meio de uma frase, escreve-o entre chavetas: {n} contas dá 3 contas, e o valor entra pelo código — keplin.i18n.t("{n} contas", { n: 3 }). Uma célula a amarelo avisa-te de que essa tradução perdeu uma chaveta que o original tem: nessa língua o valor não apareceria.

No fim, Gravar — "Traduções gravadas e compiladas."

#Porque não…?

• Porque não aparece o meu ecrã na lista de ecrãs do menu? O selector Ecrã lista os ecrãs normais da app. Ecrãs de sistema (login, recuperação, registo) não entram em menus — a plataforma serve-os sozinha.
• Porque continua a app a abrir no ecrã errado? O Menu inicial é por dispositivo. Confirma-o no dispositivo em que estás a testar.
• Porque é que o meu logo aparece cortado? Usa Ajustar à caixa ou aumenta a Largura da caixa. E lembra-te: o enquadramento só está disponível para ficheiros SVG.
• Porque é que o tema não mudou na app? Faltou Gravar — o Preview actualiza em directo, mas a app construída só recebe o tema quando gravas.
• Porque é que um widget ignorou a cor nova? Tem uma cor escrita à mão na categoria Aspecto. Troca-a por um token do tema.

A app está montada e pintada. Próxima etapa: lógica e automação.