[Firebase + Angular] Armazenando dados com Cloud Firestore

Crie uma aplicação e armazene seus dados na nuvem, conheça o Firestore.

Creditos: Freepik

Em um artigo anterior abordei sobre o Firebase e o serviço de hospedagem de de sites estáticos, se você não viu pode conferir Aqui. Dessa vez vim trazer um assunto, não tão menos importante que armazenamento de dados com Firestore.

Conhecendo o Cloud Firestore

Nessa série de serviços do Firebase vamos abordar um dos serviços mais utilizados e comuns, o serviço de armazenamento de dados em Cloud do Firebase Storage. Tudo bem, mas o que exatamente é isso e como funciona?

Cloud Firestore é um banco de dados na nuvem de estrutura, NoSQL que é um banco não relacional orientado a documentos, não possuem esquema, ou seja, os documentos armazenados não precisam possuir estrutura em comum. CloudFirestore é destinado a armazenar, sincronizar e consultar dados com facilidade para seus aplicativos móveis e da Web, de forma rápida, segura e em escala global.

Tá mas se ele não é orientado a objetos e não possui esquema, seu armazenamento é “uma bagunça”? Não é bem assim, com banco de dados NoSQL você pode estruturar seus dados facilmente com coleções e documentos. É possível também, criar hierarquias para armazenar dados que estejam relacionados e recuperar dados usando consultas expressivas. Todas as consultas são dimensionadas com o tamanho do seu conjunto de resultados, para que seu aplicativo esteja pronto para ser dimensionado desde o primeiro dia.

O que vamos utilizar

Para teste projeto pensei em utilizar UX em componentes de Card do Angular material para fazer um CRUD(Create, Read, Update e Delete) básico, só para entendermos de fato como funciona esse serviço do firebase.

• Firebase Tools
• Nodejs
• Cloud Firestore
• Angular 8
• Angular Material

Criando projeto no firebase

O Firebase fornece um pacote incrível de serviços em nuvem, facilitando a vida dos desenvolvedores, isso é fantástico, você tem alta disponibilidade para uma ampla gama de ferramentas disponíveis voltados ao desenvolvimento de aplicativos para autenticação, testes, análise, armazenamento, banco de dados etc.

Se você já possui algum projeto Firebase, pode aproveita-lo ou seguir estas etapas para criar um e ativar o banco de dados Firestore. Depois de criar um projeto Firebase, usaremos credenciais em nosso Aplicativo Angular.

1 passo — Acesse o Firebase aqui e clique em Introdução se você ainda não criou uma conta.

2 passo — Clique em “Adicionar projeto” e insira as informações relacionadas ao aplicativo, clique em “criar”.

3 passo — Após o firebase criar o projeto pra você, clique no ícone “Web App” </> para obter sua chave de configuração com informações secretas do aplicativo que adicionaremos em nosso aplicativo para se comunicar com os serviços relacionados a este projeto Firebase.

Guarde essas informações porque vamos utiliza-las, incluindo no arquivo Environment do Angular, são suas credenciais do projeto Firebase como mostrado abaixo:

export const environment = {
 production: false,
 firebase: {
 apiKey: “SUA_apiKey”,
 authDomain: “SUA_authDomain”,
 databaseURL: “SUA_databaseURL”,
 projectId: “SUA_projectId”,
 storageBucket: “SUA_storageBucket”,
 messagingSenderId: “SUA_messagingSenderId”
 }
 };

Etapa 4) Ative o serviço Firestore Database no seu projeto Firebase.

Clique em Banco de Dados na barra lateral esquerda e clique em “ + Iniciar uma coleção “, digite o nome da sua coleção de dados, dei o nome de “icecreams”. Fique a vontade para adicionar o que desejar, como eu queria testar dei o nome de icecreams, foi o primeiro que me veio a cabeça. Em seguida, pressione “ Próxima “.

Na próxima tela, exclua o registro em foco para este exemplo ou você pode inserir quaisquer dados fictícios da linha. Prefiro adicionar diretamente da nossa aplicação, mas você para escolher. Depois de excluir, clique em Salvar.

Deixamos o projeto do firebase redondinho, criamos uma coleção de dados na Cloud Firestore, “ icecreams ” está pronto, o próximo passo é conectar nosso aplicativo Firebase ao projeto Angular.

$ npm install — save firebase @angular/fire

Iniciando o projeto Angular

Se não houver instalado, pode fazer isso. O comando a seguir lhe fornece a versão mais recente do Angular CLI e NPM. Estou usando a versão 8 do angular.

$ npm install -g angular

Crie um novo aplicativo executando o seguinte comando com um template Blank, eu dei um nome genérico e optei também por rotas, logo após instalei o angular material. Estou curtindo muito esse recurso.

$ ng new icecream

navegue até a pasta do projeto que acabou de criar e prossiga:

npm install — save @angular/material @angular/cdk @angular/animations

Após adicionar os novos componentes do Angular material use os componentes básicos de angular material com o comando ng generate para gerar os nosso componentes para essa Interface de Usuário, vamos precisar destes componentes:

MaterialDashboard: Cria um componente de painel baseado em cards. Concentrei o CRUD aqui para agilizar, mas é uma boa pratica você separar cada operação em um componente, você pode “angularizar”posteriormente.
MaterialNav: Cria um componente com um sidenav responsivo para navegação.

ng generate @angular/material:materialNav — name navBar

ng generate @angular/material:dashboard dashboardIcecream

Lembrando que ao criar pelo angular CLI estes componentes já são importados automaticamente, cada um desses comandos vai gerar um componente no nosso projeto, e, cada componente terá 3 arquivos principais:

• O arquivo typescript : nav-bar.component.ts
• O arquivo html : nav-bar.component.html
• O arquivo css : nav-bar.component.css

nav-bar.component.ts

nav-bar.component.html

nav-bar.component.css

Adicionando Firebase no aplicativo angular

Lembra que o firebase te forneceu aquela credencial? Chegou a hora de utiliza, abra o arquivo Environment no local “ ~ Icecream / src / environment / environment.ts ” e adicione as credenciais do projeto Firebase como mostrado abaixo:

export const environment = {
 production: false,
 firebase: {
 apiKey: “SUA_apiKey”,
 authDomain: “SUA_authDomain”,
 databaseURL: “SUA_databaseURL”,
 projectId: “SUA_projectId”,
 storageBucket: “SUA_storageBucket”,
 messagingSenderId: “SUA_messagingSenderId”
 }
 };

Instalando firebase

O Firebase fornece um pacote incrível de serviços em nuvem, facilitando a vida dos desenvolvedores., isso é fantástico, você tem alta disponibilidade para uma ampla gama de ferramentas disponíveis voltados ao desenvolvimento de aplicativos para autenticação, testes, análise, armazenamento, banco de dados etc.

Instale o Firebase SDK e o pacote @angular/fire executando comando do CLI:

$ npm install — save firebase @angular/fire

No arquivo do módulo principal do aplicativo, importaremos o Firebase e inicializaremos o Firebase com credenciais de ambiente. Substitua o código abaixo em seu arquivo app.module.ts.

no app.component.html fira assim incluindo o nav-bar e a router

Crie um serviço provendo métodos CRUD do Firestore

Agora vamos criar um serviço com métodos de operação do produto Icecream como criar, ler, atualizar e deletar. Os métodos de serviço podem ser usados ​​em qualquer lugar sem reescrever novamente.

ng g service icecream

Logo após, importe o Angular firestore e crie os métodos no seu serviço como código a seguir:

create_NewIcecream() : Cria um novo registro na coleção especificada usando o método add

read_Icecream(): Chama o método snapshotChanges , que obterá registros e também será registrado para receber atualizações da coleção que criamos lá no firebase.

update_Icecream(): atualiza o registro pegando o ID e chamando o método de atualização .

delete_Icecream(): chama o método de exclusão para excluir o documento pelo número do ID.

Icecream.service.ts

A User Interface

Vamos trabalhar no componente Dashboard, por convenção dashboard só apresenta os dados mas aqui vamos fazer o nosso Crud nele. Com essa interface é possível criar um novo registro, excluir, editar e visualizar todas as linhas disponíveis na coleção do firestore, é claro que você pode separar os componentes posteriormente.

dashboard.sorvete.component.html

dashboard-sorvete.component.css

Input para cadastro na coleção do firestore

dashboard-sorvete.component.ts

Já é possível cadastrar, listar, editar e excluir na Cloud do Firestore.

Botão cadastrar só é habilitado quando os campos são preenchidos

Métodos de Editar e Deletar

Edição do item

Registro incluídos pelo aplicativo do Angular

BONUS: Personalizando seu Material Design(opcional)

É possível “fugir” das cores e tipografias que o angular material te fornece, personalizando através da ferramenta de Interface do Usuário e Acessibilidade para tipografia editando a fonte que for conveniente e depois é possível exportar suas alterações. Para este projeto eu quis testar uns tons, você pode consultar este guia Aqui

Quando você deseja mais personalização do que um tema pré-criado oferece, é possível criar seu próprio arquivo de tema.

Um arquivo de tema personalizado faz duas coisas:

Importa o mat-core()Sass mixin. Isso inclui todos os estilos comuns usados ​​por vários componentes. Isso só deve ser incluído uma vez, se esse mixin for incluído várias vezes, seu aplicativo terminará com várias cópias desses estilos comuns.

1. Define uma estrutura de dados do tema como a composição de várias paletas. Este objeto pode ser criado com a mat-light-themefunção ou a mat-dark-themefunção. A saída desta função é então passada para o angular-material-thememixin, que irá mostrar todos os estilos correspondentes para o tema.

Defina todos os estilos de cor e tipografia em um “arquivo de tema” para o componente

Primeiro, crie um mix de Sass que aceite um tema de material angular e produza os estilos específicos de cor para o componente. Uma definição de tema de material angular é um mapa Sass. Adicione o arquivo custom.scssno style do angular.json para refletir os resultados.

Inclusão do custom.scss no angular.json

Conclusão

Vimos o quão útil pode ser o serviço de storage do firebase, geramos uma credencial da qual conectamos nossa aplicação Angular a ele. Organizamos os arquivos através de documentos dentro da coleção Icecreams. Criamos os métodos Crud para registrar as informações e também foi possível personalizar o angular material e vocẽ pode conferir o repositório no Github

Espero que este artigo tenha sido útil, considere compartilhá-lo, deixe outras pessoas tomarem conhecimento dele.

Referências

https://console.firebase.google.com/

https://firebase.google.com/docs/firestore/query-data/get-data?source=post_page-----a7c2cfd1121e----------------------

NoSQL Tutorial: Introdução aos bancos de dados NoSQL