Um simples passo a passo de como iniciar uma aplicação Angular com acesso a um projeto Firebase

A ideia desse artigo é mostrar como construir rapidamente uma aplicação angular com acesso a um projeto Firebase, informando todos os passos necessários.

Sem falar que tem o vídeo abaixo explicando tudo direitinho =D

[embed]https://www.youtube.com/watch?v=D2K15sAe0wk&feature=youtu.be[/embed]

O gist que aparece no vídeo está aqui https://gist.github.com/evlymn/67ea12e8f4d2f4eec7a2233195cecc72 E eu que achei que apenas ia color o markdown dele aqui no BrazilJS e ia sair feliz, ledo engano... ficou tudo errado, tive que ir arrumando todas as listas, que tristeza.

Conhecendo o Firebase

  • Visão Geral

    • Visão geral do Firebase por plataforma e por produtos

  • Guias

    • Um guia com instruções passo a passo dos recursos do Firebase

  • Api Reference

    • Informações detalhadas sobre cada classe e método no SDK do Firebase

  • Exemplos

    • Exemplos de inícios rápidos dos recursos disponíveis

  • Bibliotecas

    • Diversas bibliotecas, como angularfire, emberfire, reactfire, etc...

Criar um novo projeto no Firebase

  • [http://console.firebase.google.com](Firebase console) > Adicionar Projeto > Dê um nome ao seu novo projeto

    • Em Localização do Analytics mude para Brazil

    • Local do Cloud Firestore continua igual

    • Aceite os termos do controlador

    • Enjoy seu novo projeto

Referências dos CLIs que serão usados

Instalar pacotes globais

  • npm install -g @angular/cli

  • npm install -g firebase-tools *caso necessário *

Criar um projeto Angular

  • ng new novo-projeto --routing

Adicionar dependências básicas do projeto

  • npm install --save firebase

  • npm install --save angularfire2

  • ou

  • npm install --save firebase angularfire2

Adicionar arquivo firebase config ao projeto

  • Firebase console > project overview > adicionar app> selecionar plataforma web

  • criar arquivo firebase.config.ts dentro do projeto angular > environments

Adicionar referências ao app.module.ts

  • AngularFireModule > Inicializar app com o FirebaseConfig AngularFireModule.initializeApp(FirebaseConfig)

  • AngularFireAuthModule

  • AngularFireDatabaseModule

  • FormsModule

Iniciar o firebase no projeto que foi criado

  • firebase init

  • Selecionar Functions e Hosting

  • Escolha o projeto que foi criado

  • Em qual linguagem para as Cloud Functions, selecione TypeScript

  • E sim, use o TSLing para pegar prováveis bugs, etc... `Y`

  • Deixe instalar as dependencias com o npm já `Y`

  • O diretório que o firebase deve usar para pegar os arquivos publicos será o `dist/nome-do-projeto`

  • sim para configurar como single-page app `y`

Adicionar arquivos ao gitignore

  • /functions/nodemodules/

  • /functions/package-lock.json

  • package-lock.json

Configurar método de login

  • Firebase console > authentication > método de login > selecionar o provedor de login desejado > ativar > Simplifique usando o provedor Email/senha

Configurar regras da Realtime Database

  • Firebase Console > Database > Realtime Database > Regras > Defina as regras para somente leitura e escrita caso o usuário esteja autenticado Exemplo:

{   "rules": {         ".read" : "auth != null",         ".write" : "auth != null"       } }  

Checkpoint

A partir desse ponto sua aplicação está apta a autenticar no módulo de authentication pelos provedores ativados e a ler e escrever na realtime database com um usuário autenticado.

Fazer primeiro deploy do site para o hosting do firebase

  • Modifique o arquivo app.component.html da maneira que quiser.

  • Teste como ficou usando o server do angular ng serve ou o do firebase firebase serve --only hosting, que irá servir os arquivos que estarão na basta dist/nome-do-projeto, o que é ótimo para testar o comportamento que realmente vc terá quando o site estiver publicado

  • Faça o build do angular ng build --prod

  • Faça o deploy para o firebase hosting com o comando firebase deploy --only hosting > --only hosting pq tem o projeto de functions, sem isso, todo deploy iria ser feito tanto do hosting quanto das functions, o que levaria mais tempo

  • Após o deploy clique no link que o firebase cli disponibiliza algo como *nome-do-projeto.firebaseapp.com* e vc irá visualizar o site publicado

  • Verifique a publicação no console em Firebase console > hosting > todos os deploys irão aparecer nessa tela, e estarão versionado, caso seja necessário voltar o anterior

Well, Enjoy your new Firebase project!