Firebase Web – Zero to Hero parte 5

HTML 5 + Firebase Authentication
HTML 5 + Firebase Authentication

Authentication parte 4

Criando componente de email e senha


Agora vamos adicionar um formulário de signin de email e senha

O Id do provider de autenticação de email e senha dentro do authentication é password, porém como fica semanticamente pobre para entendimento, eu costumo descrever o componente que crio para o formulário como auth/auth-email-password
Essa informação vem de firebase.auth.EmailAuthProvider.PROVIDER_ID, mas não se assuste, iremos ver isso mais tarde. =D

Então vamos codar, vamos adicionar o componente

ng g c auth/auth-email-password
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.scss (0 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.html (34 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.spec.ts (707 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.ts (320 bytes)
UPDATE projects/principal/src/app/auth/auth.module.ts (379 bytes)
Continue reading →

Firebase Web – Zero to Hero parte 4

Bootstrap + Authentication

Authentication parte 3

Continuando o layout, adicionando o Bootstrap


Bootstrap, não acho que seja uma questão de gostar ou não gostar, muito antes pelo contrário

E por isso vamos instalar o bootstrap no nosso projeto, e para isso vamos usar a lib ngx-bootstrap, o comando agora é um pouco diferente, como o ngx-bootstrap provém schematics, isso é, ele atualiza o projeto aonde é necessário para seu funcionamento, no caso dele no package.json e no angular.json

Para maiores informações sobre schematics visite https://angular.io/guide/schematics-for-libraries

Bem, vamos nessa, no console digite: ng add ngx-bootstrap

Continue reading →

Firebase Web – Zero to Hero parte 3

HTML 5+ Firebase Authentication
HTML 5+ Firebase Authentication

Authentication parte 2

Arrumando o layout


Vamos arrumar o layout, afinal, temos que deixar bonito 🤩

Primeiro, quero colocar um background na tela de auth, porém somente na tela de auth.
Mas como se é um component, e o background para ficar bom precisa ser estilizado no body?

Primeiro preciso de um background, adicionei um a pasta assets/images, pasta images essa que eu criei.
projects/principal/src/assets/images/auth-background.png

auth-background.png
auth-background.png
Continue reading →

Firebase Web – Zero to Hero parte 2

HTML 5+ Firebase Authentication
HTML 5+ Firebase Authentication

Authentication parte 1

Criando os módulos e components de auth


Vamos começar definindo o que fará parte do módulo authentication

O que costumo fazer é ter um módulo chamado, auth.module.ts
Para isso uso o comando de gerar módulo do CLI do Angular, o ng g(generate) m(module), no caso, ng g m auth, ele irá criar uma pasta chamada auth com o módulo dentro dela
Vamos nessa?

ng g m auth
CREATE projects/principal/src/app/auth/auth.module.ts (190 bytes)
Continue reading →

Firebase Web – Zero to Hero parte 1

Angular + Firebase
Angular + Firebase

Desenvolvendo uma aplicação web usando Angular acessando os recursos do Firebase

Durante essa série de artigos iremos ver tudo que a aba Desenvolver do console do Firebase oferece:
Authentication, Database, Storage, Hosting,Functions


Nessa primeira parte iremos criar a aplicação Angular

E o que precisamos para isso?
Acredito que vc já tenha familiaridade com gerenciadores de pacotes, no caso uso o NPM https://www.npmjs.com/ e será com ele que os exemplos serão exemplificados 😋
Para ter o NPM instalado primeiramente instala o nodejs https://nodejs.org/en/, caso ainda não tenha, esse é o momento de instalá-lo

Continue reading →