Finalizando nossa integração com o Firebase utilizando o Angular 11, acessar as informações do usuário na página. Se você está chegando agora e ainda não viu o artigo anterior, recomendo que inicie sua leitura por ele, onde explico o passo a passo inicial para integração e criação do app do Angular. Vou deixar, caso queira
Finalizando nossa integração com o Firebase utilizando o Angular 11, acessar as informações do usuário na página.
Se você está chegando agora e ainda não viu o artigo anterior, recomendo que inicie sua leitura por ele, onde explico o passo a passo inicial para integração e criação do app do Angular.
Vou deixar, caso queira os dos artigos anteriores, se ainda não sabe como integrar, recomendo a leitura antes de prosseguir:
Se você quiser baixar o projeto, está em meu GitHub no repositório Firebase.
Criando os componentes da tela de Informações do usuário do Firebase
Já deixamos criadas as paginas / componentes no artigo anterior, mas caso queira, segue o script para executar:
Então vamos construir o layout da pagina de registro. Já inclui também a lógica do componente UserInfo, que estará logo abaixo:
Fiz uma pequena mudança na tela UserInfo, caso não tenha o login, exibo o link para direcionar para o Login. O trecho é o seguinte:
Você pode modificar o quanto quiser este layout depois, este é apenas um exemplo didático, então me atentei a tela e recursos de UX.
Então, vamos fazer um teste com todos os demais itens que criamos. Vamos começar registrando um usuário e logo após, entrar na tela de Login:
Ao efetuar o Login, as informações da sua conta serão exibidas na tela (uid e email):
Simples, não?
Concluindo
Temos muitas aplicações para esta integração com o Firebase, podendo ser utilizado em qualquer pagina web ou app mobile.
O layout da tela ficou bem simples, nada muito sofisticado, mas futuramente irei revisitar os artigos e acrescentar mais algumas coisas, se possível.
Então é isso, espero ter ajudado de alguma forma e até a próxima semana!
Leave a Comment
Your email address will not be published. Required fields are marked with *