Angular 6 e Firebase — Desenvolvendo um portfólio (parte 3)

Firebase, integração e CRUD

Continuando nossa série de artigos, chegou o momento de definir o sistema de armazenamento de dados e autenticação.

O Firebase é uma plataforma que congrega vários serviços com ênfase em aplicações móveis. O primeiro passo é acessar o console, logado com uma conta google no endereço:

https://console.firebase.google.com

Clique em adicionar projeto, dê um nome, a localização do analytics e aceite os termos para prosseguir.

Aguarde a criação e clique em continuar.

O painel de controle é bem intuitivo e também cheio de recursos, mas vamos concentrar basicamente em três objetivos para a integração com o firebase. São eles:

a) Criação do Banco

O Firebase provê dois sistemas de armazenamento. O RealTime e o CloudFirestore. Vamos escolher o último que permite “[…] consultas e escalonamento automático mais eficientes”.

Para isso, vamos clicar no menu esquerdo Database e logo em seguinda na área central.

A próxima tela solicita o modo de proteção dos dados. Podemos definir o modo de teste, permitindo que qualquer pessoa com sua referência de banco de dados poderá fazer leituras ou gravações no seu banco de dados. Não se preocupe pois posteriormente atualizaremos essa opção. Após a mudança, selecione o ativar e aguarde.

A próxima tela é o painel do nosso banco. Podemos criar coleções, documentos, objetos e campos nesta tela. No entanto, vamos criar a lógica na programação do projeto.

Vamos para o segundo objetivo.

b) Autenticação

Outro recurso muito útil para qualquer sistema é a autenticação. O Firebase também provê um serviço para autenticar e gerenciar os usuários.

Para isso, clique no menu lateral Authentication e logo em seguida, configurar o método de login.

É possível escolher vários provedores de autenticação, mas para o projeto habilitamos o Email/senha. Ative e salve.

Vamos ainda, criar um usuário. Na aba superior Usuários, clique para adicionar um usuário. Informe um email e uma senha.

c) Dados do Projeto

O último passo é copiar as informações do projeto para integrar ao nosso projeto. Encontre na parte superior direita as configurações do projeto.

Na próxima tela encontre o link , Adicionar o Firebase ao seu aplicativo Web.

Copie somente o objeto e o conteúdo do config e cole no bloco de notas. Daqui a pouco utilizaremos essas informações para integrar nossa aplicação.

Angularfire2 — Instalação e configuração

Voltando o Visual Studio code e com nosso projeto aberto, vamos instalar as bibliotecas que usaremos para integrar nosso sistema ao Firebase.

Abra o terminal e digite:

npm install angularfire2 firebase — save

Aguarde até o download completo dos pacotes no projeto.

Vamos adicionar o as informações do firebase as variáveis de ambiente.

Abra o arquivo /src/environments/environment.ts e cole a configuração.

export const environment = {
 production: false,
 firebase: {
 apiKey: ‘<your-key>’,
 authDomain: ‘<your-project-authdomain>’,
 databaseURL: ‘<your-database-URL>’,
 projectId: ‘<your-project-id>’,
 storageBucket: ‘<your-storage-bucket>’,
 messagingSenderId: ‘<your-messaging-sender-id>’
 }
};

O próximo passo é informar os módulos. Abra /src/app/app.module.ts, e inject o provider do Firebase informando a configuração. Vamos incluir também quais são os módulos que utilizaremos da biblioteca, correspondente ao serviço no Firebase.

app.module.ts

Linhas 1, 2 e 3 informamos os imports necessários . (18) Passamos a configuração do Firebase e em (19 e 20) definimos dois módulos que serão utilizados no projeto. O Acesso ao Cloud Firestore a autenticação.

Criação do Modelo e do Serviço

Vamos criar uma classe que representa um modelo de dados do banco.

Na pasta src/app crie um arquivo e nomeio como project.model.ts.

O código é a implementação da classe:

export class Project {
 idProject: string;
 name: string;
 title: string;
 datePub: any;
 description: string;
 photoMain?: string;
 constructor(){}
}

Definimos alguns atributos, comuns a todo projeto como nome, descrição e data da publicação. O tipo para dataPub definimos como any vamos buscar no momento em que inserirmos no banco.

Já a criação da classe responsável pelo serviço, utilizaremos novamente a ferramenta de comando do Angular.

No terminal digite:

ng g service project

Serão criados dois arquivos em src/app. Ao abrir o arquivo project.service.ts encontramos:

Na seção do código (a) o decorator @Injectable define como uma classe de serviço. Essa classe será responsável ao expor os métodos necessários para operações no banco (Cloud Firestore)

Logo abaixo da assinatura da classe, vamos criar uma referencias para a coleção (9), e injetar no construtor da classe (11) indicando coleção de documentos que iremos manter (12).

Na próxima postagem, vamos criar o componente responsável pela interface e o consumo dos métodos de operações no banco.

Repositório do projeto
https://github.com/kheronn/portfolio

À plus tard!!