Front End

25 jul, 2017

Simples aplicação real time com angular 4 e firebase – Parte 02

Publicidade

Nesse artigo, iremos falar sobre o Firebase, o que é etc… E também iremos ver os componentes que vamos instalar para o Angular se comunicar com as APIs do Firebase.

Mas então, o que é Firebase, onde mora, do que se alimenta?

Firebase

O Firebase é uma ferramenta do Google e ao mesmo tempo uma infraestrutura para você desenvolver aplicativos com maior rapidez e flexibilidade. É o que podemos chamar de um BAAS – Backend as a Service, você não baixa, nem tem uma ferramenta específica de administração, todo o gerenciamento é feito pela web, ou cloud – como você desejar. A ideia é desenvolver aplicativos de forma simples e sem preocupação com a escalabilidade! E quanto custa? Nada? Digamos que sim, vamos usar o plano spark para o nosso aplicativo, e como o próprio firebase diz, ‘limites generosos para amadores’. Eu sei que não somos amadoras, mas se é de graça, então, tudo bem.

Firebase

Vamos dar uma olhada no console do Firebase:

https://console.firebase.google.com

Simples né? E não é só isso, tem muito mais coisas ai dentro ?
Simples né? E não é só isso, tem muito mais coisas ai dentro

Então vamos criar um projeto e ver tudo que podemos fazer. Clique em adicionar projeto:

De um nome para seu aplicativo e informe sua região.
De um nome para seu aplicativo e informe sua região.

Clique em criar projeto e é só amor!

Aplicação overview
Aplicação overview

No menu ao lado, podemos ver muito do que o Firebase disponibiliza. Nesse primeiro momento, iremos utilizar apenas Database, mas podemos ver outros itens muito interessantes. Vamos dar uma pequena passada nos que fazem parte do nosso contexto.

Authentication

Authentication
Authentication

O Firebase Authentication fornece serviços de backend, SDKs fáceis de usar e bibliotecas de IU prontas para o uso para autenticar os usuários em seu aplicativo. Ele oferece suporte a autenticação usando senhas, provedores populares de identidades de identidades federadas, como o Google, Facebook e Twitter, e muito mais.

Realtime Database

Realtime Database
Realtime Database

O Firebase Realtime Database é um banco de dados hospedado na nuvem. Os dados são armazenados como JSON e sincronizados em tempo real com todos os clientes conectados. Quando você cria aplicativos multiplataforma com nossos SDKs para iOS, Android e JavaScript, todos os seus clientes compartilham uma instância de Realtime Database e automaticamente recebem atualizações com os dados mais recentes.

Storage

Storage
Storage

O Firebase Storage proporciona uploads e downloads de arquivos seguros para seus aplicativos do Firebase, independentemente da qualidade da sua rede. Você pode usá-lo para armazenar imagens, áudio, vídeo ou outro conteúdo gerado por usuários. O Firebase Storage é respaldado pelo Google Cloud Storage, um serviço de armazenamento de objetos que é simples e econômico.

Hosting

Hosting
Hosting

O Firebase Hosting é uma hospedagem de conteúdo da web de nível de produção para desenvolvedores. Com o Hosting, você pode implementar facilmente e com rapidez aplicativos da web e conteúdo estático em uma rede global de fornecimento de conteúdo (CDN) com um único comando. Também oferece suporte a configuração do seu próprio domínio e algo que acho mega produtivo, o versionamento das publicações.

Functions

Funções em nodejs
Funções em nodejs

Firebase Cloud Functions permite que você execute automaticamente o código do backend em resposta a eventos disparados por recursos do Firebase e solicitações HTTPS. Seu código é armazenado na nuvem do Google e é executado em um ambiente gerenciado. Não há necessidade de gerenciar e dimensionar seus próprios servidores.

E agora você pergunta, ok Mana, o que faço com tudo isso?

Ahhh, agora temos algumas instalações e configurações importantes para fazer no nosso aplicativo, vamos instalar do npm dois pacotes, o do firebase e o angularfire2. Vamos lá! Vá ao terminal e vamos instalar o firebase. Para isso digite:

npm install firebase --save
Firebase instalado
Firebase instalado

Agora iremos instalar o angularfire2. Ele irá nos prover uma série de facilidades para trabalharmos com o firebase. Digite no terminal:

npm install angularfire2 --save

Irão aparecer alguns erros, mas é porque o npm é meio burrinho, se você notar o que ele está reclamando, já existe nos modulos do npm.

angularfire2 instalado, com errinho bobo
angularfire2 instalado, com errinho bobo

Se você olhar para o arquivo PACKAGE.JSON, irá notar que tudo que baixamos fica declarado nesse arquivo, pois usamos o parâmetro – -Save

package.json
package.json

Agora vamos codar! Vamos colocar a referência de configurações do nosso projeto criado no firebase na nossa aplicação. Para isso, volte ao console do firebase e em overview. Clique em Adicionar o Firebase ao seu aplicativo da Web e copie o código que irá aparecer, mas somente a parte que começa em ‘var config={‘

Configuração do projeto,
Configuração do projeto,

Volte aos fontes do nosso aplicativo e ache a pasta enviroments dentro de src. Nela, iremos criar o arquivo firebase.config.ts e colar o código que foi copiado. Após copiado, vamos fazer uma pequena mudança, troque:

var config = {

Por

export const FirebaseConfig = {

Ficará idêntico a imagem abaixo:

Firebase config
Firebase config

Não terminou ainda. Temos algumas outras coisas para fazer. Vamos importar e declarar o módulo angularfire2 e do FirebaseConfig que criamos no nosso projeto. Encontre o arquivo app.module.ts dentro da pasta app. Nele iremos inserir 3 linhas de código.

import { FirebaseConfig } from ‘./../environments/firebase.config’;<br /<
import { AngularFireModule } from ‘angularfire2/index’;

e

AngularFireModule.initializeApp(FirebaseConfig)
Linhas inseridas em seus devidos lugares
Linhas inseridas em seus devidos lugares

Vamos rodar a aplicação para ver está tudo funcionando. Ainda no terminal, dentro da pasta do projeto, digite:

ng serve

Caso vc se depare com esse erro:

Erro
Erro

Vá ao terminal e instale do npm a atualização do pacote promise-polyfill

npm install promise-polyfill --save -exact

Tudo ok, então, devemos ver nossa aplicação funcionando ainda?

\o/
\o/

Por enquanto é isso!

Na próxima parte, integraremos nossa aplicação ao banco de dados real time do firebase e veremos a mágica acontecer. Obrigada pela paciência, e lembrem-se, esse artigo tem que ser de fácil entendimento a todos. Se acharem que faltou alguma explicação, me avisem e vamos melhorando.