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

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!

Evelyn Mendes
Posts