728 x 90

Integrar o Firebase no Angular 11 – Parte 3

Integrar o Firebase no Angular 11 – Parte 3

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:

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:
Como resultado de nossa alteração

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:

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.

Ao efetuar o Login, as informações da sua conta serão exibidas na tela (uid e email):

Exibindo as informações da conta do Firebase

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!

Posts Carousel

Leave a Comment

Your email address will not be published. Required fields are marked with *

Latest Posts

Top Authors

Most Commented

Featured Videos