Nesse vídeo mostro como adicionar as dependências Firebase Core, Analytics e Cloud Firestore para iOS e Android, e também como trocar as dependências para o Androidx em um projeto Flutter
Continue reading →Projeto Flutter com Dependências Firebase
Category / Firebase
Flutter Create com Bundle Identifier
Um dica rápida de como criar um projeto Flutter já com o bundle identifier para os projetos Android e iOS, assim economizando tempo de configuração.
Continue reading →Firebase Web – Zero to Hero parte 5
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)Firebase Web – Zero to Hero parte 4
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
Firebase Web – Zero to Hero parte 3
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
Firebase Web – Zero to Hero parte 2
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)Firebase Web – Zero to Hero parte 1
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
Fazendo requisições para a API do GraphQL nas Cloud Functions
Nesse vídeo falo de uma parte que ficou faltando, como chamar a API fora do ambiente apresentado no anterior, o graphiql, então uso para isso o Postman numa requisição simples https post.
GraphQL e Express nas Cloud Functions do Firebase
Nesse vídeo mostro um exemplo bem prático e simples de como usar GraphQL junto com o Express retornando dados da Realtime Database, espero que gostem e seja útil
Firebase Hosting Parte 2
Conteúdo dinâmico com as Cloud Functions ou Microsserviços
Agora vamos juntar o que foi criado no vídeo 1 com as Cloud Functions
No final fiz uma bobagem do tipo, era de um jeito que vc sempre faz, mas na hora de explicar vc faz de outro rsrs
E o pior eu testei errado antes.
Mas acabou dando tudo certo =D