Navigasjon og tema

De fire skjermene finnes, men den som logger inn i appen, har ingen måte å komme fram til dem på: navigasjonen mangler. Denne etappen er kort og endrer alt — til slutt har appen meny, logo, egne farger, og den er klar til å snakke mer enn ett språk.

Tre forskjellige ting, tre forskjellige steder:

Hva	Hvor du gjør det
Navigasjonen — menyen du beveger deg rundt i appen med	Panelet UI ▸ Navigasjon
Temaet — farger, hjørner og typografi	Appinnstillinger ▸ Tema
Språkene — språkene og setningene	Appinnstillinger ▸ Oversettelser

#Navigasjonseditoren

1. I panelet UI, klikk på Navigasjon, rett over seksjonen Skjermer. Det åpnes en fane med editoren.
2. Editoren er en modell av linjen i appen: du drar menyer mellom sonene (venstre, midten, høyre) og ser resultatet med én gang.
3. De tre enhetsknappene øverst — Web (1280px), Nettbrett (768px), Mobil (390px) — bytter design. Begynn på Web.

#Lage de tre menyene

1. Klikk på + i sonen til venstre. Et nytt element dukker opp, sammen med panelet Valgt element til høyre.
2. Velg Meny — typen som fører til en skjerm.
3. Fyll inn Navn på menyen, velg Ikon og, under Skjerm, målskjermen.
4. Gjenta for alle tre.

Navn på menyen	Ikon	Skjerm
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Legg merke til hva som ikke står på listen: Ficha de Conta. Det er med vilje — dit kommer du ved å klikke på en rad i kontotabellen, ikke via en meny. En skjerm uten meny er fortsatt tilgjengelig via ruten og via koden; navigasjonen er bare inngangsdøren.

5. I øvre høyre hjørne, velg Startmeny: Início. Det er skjermen som åpnes når noen kommer inn i appen uten å oppgi noen rute.
6. Klikk på Lagre — «Navigasjonen er lagret.»

#Brukermenyen

På høyre side av linjen ligger et spesielt element: Brukermeny. Det er der den som bruker appen, ser navnet sitt og logger ut. Velg det og finjuster:

• Vis navnet og Vis brukernavnet (pålogging) — hva som vises ved siden av avataren. Uten ikon viser avataren initialene fra navnet.
• Alternativet «Logg ut» — la Systemets eget (oversatt) stå, med mindre du vil ha en annen tekst.

#Logoen til appen

Logoen bor i linjen, helt til venstre. Før du velger den, må den lastes opp til appen:

1. I panelet UI, i seksjonen Assets, klikk på Last opp filer og velg logoen din. En SVG er det beste valget: den holder seg skarp i alle størrelser, og det er det eneste formatet som kan rammes inn.
2. Gå tilbake til fanen Navigasjon og klikk på logoen i modellen (Rediger appens logo).
3. I Ikon eller bilde, velg filen du lastet opp.
4. Slå på Vis navnet på appen hvis du vil ha navnet skrevet ved siden av symbolet.
5. I Innramming i linjen, dra bildet for å plassere det og bruk Skala og Bredde på boksen for å dimensjonere det — «SVG-filen forblir uendret — beskjæringen er kun visuell og kan reverseres.» Tilpass til boksen gjør jobben for deg; Ingen innramming går tilbake til start.
6. Lukk med Ferdig og Lagre.

#Hver enhet har sin egen navigasjon

Gå tilbake til toppen av editoren og klikk på Mobil (390px). Legg merke til at designet er et annet — og at det dukker opp en ny velger, Modus:

Modus	Hva du får
Topplinje	Den samme linjen som på web, krympet.
Hamburgermeny	En knapp som åpner menyen i et sidepanel. Det er det vanligste på mobil.
Handlingslinje	En linje nederst på skjermen, med opptil 5 elementer — standarden i mobilapper.

Sett sammen de samme tre menyene i Mobil (Início, Contas, Oportunidades), velg Modus slik du foretrekker og lagre. Startmeny er også per enhet — du kan åpne dashbordet på datamaskinen og kontolisten på mobilen.

#Temaet — å male appen

Tema maler den ferdige appen, uten å røre en eneste skjerm.

1. Øverst i linjen i appen, klikk på tannhjulikonet (Appinnstillinger).
2. I gruppen Utseende, velg Tema.
3. Til venstre ligger fargegruppene; til høyre panelet Forhåndsvisning — «Eksempel med de nåværende verdiene — oppdateres direkte.» Hver farge du endrer, dukker opp der på et blunk.

Gruppe	Hva den maler
Basis	Bakgrunn og tekst i appen, konturer, felter og fokusringen.
Flater	Kort og popovers (menyer, nedtrekkslister, tooltips).
Farger	De semantiske fargene — Primær, Sekundær, Destruktiv, Aksent, Dempet (muted) — og teksten oppå hver av dem.
Navigasjon	Navigasjonslinjene i appen. Som standard følger de flatene; det er her merkevaren settes på.

For Kundehåndtering holder det å røre to ting:

1. Under Farger, sett Primær til fargen til merkevaren din. Det er fargen på handlingsknappene, lenkene og den aktive tilstanden.
2. Under Navigasjon, bestem om linjen skal være lys (og følge flatene, som er utgangspunktet) eller få merkevarefargen. Maler du den, juster også Tekst i linjene — en mørk linje med mørk tekst kan ikke leses.

Hver farge har en visuell velger og et heksadesimalt felt (#rrggbb) — å skrive eller å velge kommer ut på det samme. Nederst i listen ligger Form og typografi:

• Hjørneradius — fra Uten avrunding (0) til Maksimum (1rem), i fem trinn.
• Plassering av meldingene — hvilket hjørne meldingene dukker opp i (de som keplin.ui.toast() fra forrige etappe viser).
• Skrift (sans) — skriftstakken i appen.

Lagre med Lagre. For å gå tilbake til utgangsfargene, Tilbakestill til standard — den tilbakestiller i editoren, og det blir først endelig når du lagrer.

#Språkene

Den siste delen av denne etappen er seksjonen Oversettelser, i gruppen Lokalisering i innstillingene. Det er en matrise: én rad per setning, én kolonne per språk.

I en nybygd app er den tom, og det er normalt: tekstene du skrev i widgetene, bor i skjermene. Oversettelsene er til for tekstene som koden skriver — og for å gi appen et andre språk.

Legge til et språk:

1. Klikk på + i toppen av matrisen.
2. Velg språket under velg språk… og bekreft med Legg til språk. Den nye kolonnen fødes tom.

Lage en setning:

1. Skriv på den siste raden, som alltid står og venter («skriv for å opprette…»).
2. Nøkkelen til setningen «(hentes fra setningen)» — det er selve teksten på basisspråket som identifiserer den.
3. Fyll inn de andre kolonnene med oversettelsen.

I hendelsene på skjermene brukes setningen via teksten:

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

For å sette en verdi inn i en setning skriver du den i krøllparenteser: {n} contas gir 3 contas, og verdien kommer fra koden — keplin.i18n.t("{n} contas", { n: 3 }). En gul celle varsler deg om at den oversettelsen har mistet en krøllparentes som originalen har: på det språket ville verdien aldri dukket opp.

Til slutt, Lagre — «Oversettelsene er lagret og kompilert.»

#Hvorfor ikke …?

• Hvorfor dukker ikke skjermen min opp i skjermlisten i menyen? Velgeren Skjerm lister opp de vanlige skjermene i appen. Systemskjermer (innlogging, gjenoppretting, registrering) inngår ikke i menyer — plattformen leverer dem på egen hånd.
• Hvorfor fortsetter appen å åpne på feil skjerm? Startmeny er per enhet. Sjekk den på enheten du tester på.
• Hvorfor vises logoen min beskåret? Bruk Tilpass til boksen eller øk Bredde på boksen. Og husk: innrammingen er bare tilgjengelig for SVG-filer.
• Hvorfor endret ikke temaet seg i appen? Det manglet et Lagre — Forhåndsvisning oppdateres i sanntid, men den ferdige appen får temaet først når du lagrer.
• Hvorfor overså en widget den nye fargen? Den har en farge skrevet for hånd i kategorien Utseende. Bytt den ut med et token fra temaet.

Appen er satt sammen og malt. Neste etappe: logikk og automatisering.