O que vais construir
Uma página com login (Google, Apple, email), uma área privada que só vês depois de entrares, e o botão de sair — o fluxo real, demonstrado em segurança.
A demonstração simula o login em segurança (sem guardar nada). Numa app real, ensina-se com o Supabase normal (público) — o Google/Apple e a base de dados tratam das palavras-passe; tu NUNCA as guardas.
Em quase todas as apps repetimos as mesmas camadas, como construir uma casa: o HTML põe as coisas na mesa (a estrutura), o CSS veste-as (a aparência), e o JavaScript é a linguagem que lhes dá vida (o que reage ao toque). No fim, a memória guarda o que importa. Não precisas de decorar — vais reconhecê-las em cada passo. E há um truque de criador: antes de cada passo, diz em voz alta “quando eu faço X, a app deve fazer Y”. Isso transforma-te de quem copia em quem cria.
Pomos na mesa duas coisas: o ecrã de ENTRAR (botões do Google e da Apple, e campos de email e palavra-passe) e um ecrã PRIVADO — que está escondido até entrares. É como uma porta e a sala lá dentro.
<div id="login">
<button data-prov="Google">Continuar com Google</button>
<input id="email" type="email" />
<input id="pass" type="password" />
<button class="entrar">Entrar</button>
</div>
<div id="privado" style="display:none">...a tua área...</div>Acrescenta um botão 'Continuar com Apple' ao lado do Google. Mexeste só na estrutura.
Montaste a casa seguindo o plano. O salto a criador é mudá-la sozinho. Tenta estas três — da mais simples à mais corajosa — sem receita. Se travares, pede à tua IA; mas tenta primeiro, e diz antes «quando eu fizer isto, a app deve…».
O que construíste é teu. Abre a Prova Viva, clona para a tua IA, e faz crescer — uma cor nova, um botão novo, ou A Página com Login no teu telemóvel.