Desenvolvendo um CRUD com VueJS e Firebase Parte 1

Desenvolvendo um CRUD com VueJS e Firebase Parte 1

14/10/2018 0 Por Alisson Suassuna

E aí galera, vamos a mais um artigo semanal do blog, neste iremos aprender a criar nossa primeira aplicação real, vamos criar um sistema de gerenciamento de vendas onde teremos um CRUD com VueJS e Firebase utilizando  o VueJS e o Firebase para salvar, atualizar, editar e remove os dados da aplicação.

O que é CRUD?

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Antes de tudo precisamos sabe o que é esse tal de CRUD? Então vamos lá. CRUD é um acrônimo de (Create, Read, Update e Delete na língua Inglesa) para as quatro operações básicas utilizadas em bases de dados relacionais (RDBMS) ou em interface para utilizadores para criação, consulta, atualização e destruição de dados.

Escopo da Aplicação que será Desenvolvida – CRUD com VueJS e Firebase

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

O nosso cliente pediu uma aplicação para controlar suas vendas, pois hoje esse trabalho é feito manualmente, com as seguintes características o cliente irá pode salvar, atualizar, editar e remover os seguintes dados (Nome do Produto, Marca, Valor e Data de Venda) haverá também um campo de buscar por nome do produto, esse será o escopo da nossa aplicação.

Preparando o Ambiente de Desenvolvimento

Vamos precisa instalar:

  • NodeJs
  • NPM (Normalmente o npm vem junto com Node, caso não venha instale )

Para verificar se o NodeJS e o NPM estão instalado corretamente, abra o terminal ou CMD (para quem usa Windows) digite o seguinte comando:

Se as saídas foram essas, então está tudo certo, podemos continuar.

Criando o Projeto

Vá até o diretório onde deseja criar o projeto, no meu caso vou está criando na minha área de trabalho, abra o terminal ou (CMD no Windows). Com o terminal aberto vamos utilizar o npm para instala o Vue CLI 3 escreva o seguinte comando:

O CLI foi desenvolvido para facilitar a criação de projetos em VueJS, para criar é muito simples basta apenas escrever o comando vue create [nome do projeto] o Vue CLI irá preparar todo o ambiente com a estrutura necessária para que possamos desenvolver nossa aplicação veja passo a passo a criação do projeto:

  1. vue create [nome do projeto]
  2. pressione enter para seleciona o padrão
  3. irá fica desse jeito
  4. cd [nome que você escolhe]
  5. npm run serve
GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Agora abrimos o browser usando um dos dois endereço do passo 5. http://localhost:8080 o resultado será este da imagem abaixo.

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Estamos pronto para começar a escrever nossa aplicação. Vamos abrir o código da aplicação, vou utilizar o Visual Studio Code, mas use o que preferir.

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Essa é a estrutura base que o Vue CLI cria, a partir dela vamos iniciar a codificação da nossa aplicação.

Começando a desenvolver a aplicação de Gerencia Vendas

Passo 01: Delete o diretório components

Passo 02: Abra o arquivo App.vue e apague o seguinte trecho de código import HelloWorld from ‘./components/HelloWorld.vue

Passo 03: Ainda no arquivo App.vue delete todo o código que estiver dentro da função export default { }

Passo 04: Delete também tudo que estive dentro da tag <style>

Ao completar esses quatros passos o arquivo App.vue devera está parecido com a imagem a seguir.

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Trabalhando com Firebase

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Vamos está utilizando o Firebase para salvar nossos dados em um banco de dados e o mesmo, oferece isso pra gente de maneira fácil e simples, mas o que é esse tal de Firebase?

O Firebase é uma plataforma de desenvolvimento de aplicativos para dispositivos móveis e da Web desenvolvida pela Firebase, Inc. em 2011 e adquirida pelo Google em 2014, essa plataforma tem diversos serviços, um deles Cloud Firestore.

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

O Cloud Firestore é um banco de dados flexível e escalonável para desenvolvimento de dispositivos móveis, Web e servidores a partir do Firebase e do Google Cloud Platform. Como o Firebase Realtime Database, ele mantém seus dados em sincronia em aplicativos cliente por meio de listeners em tempo real. Além disso, oferece suporte off-line para dispositivos móveis e Web para que você possa criar aplicativos responsivos que funcionem independentemente da latência da rede ou da conectividade com a Internet. O Cloud Firestore também oferece integração perfeita com outros produtos do Firebase e do Google Cloud Platform, incluindo o Cloud Functions. Saiba mais aqui

Firebase com VueJS

Para fazer uso do Firebase em nosso projeto, precisamos instalar dois pacotes com o npm install, primeiro pacote é o próprio Firebase, segundo o Vuefire. O VueFire de maneira bem resumida é um plugin criado pela comunidade onde ele facilita e automatizar algumas tarefas realizada entre a comunicação do banco de dados e a sua aplicação, para fazemos a instalação escrevemos no terminal o seguinte código: npm install firebase vuefire, aqui já estamos instalado os dois pacotes!

Criando o Banco de Dados com Firebase

Nossa aplicação já está pronta para trabalhar com Firebase, porém ainda precisamos criar um projeto na plataforma, para fazer isso precisamos acessar www.firebase.google.com siga os passos:

Passo 01: IR PARA CONSOLE

Passo 02: Adicionar projeto

Passo 03: Informe o nome do projeto, depois pressione no botão Criar projeto

Passo 04: Escolha o tipo da aplicação, em nosso caso Web

Passo 05: Selecione todos os atributos que estão no objeto config

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Depois de ter feito todos esses cinco passos voltamos ao nosso código e dentro do SRC, criamos um diretório chamado database e dentro dele criamos um arquivo chamado firebase.js, dentro deste arquivo vamos escrever o seguinte código:

Neste arquivo configuramos tudo relacionado ao nosso banco de dados, primeiro importamos o firebase, depois criamos uma constate chamada “app” e atribuirmos a variável “initializeApp” que contém todas as funções e recursos do firebase e passamos a configuração para o objeto que contém os seguintes atributos, apiKey, authDomain, databaseURL etc.

Lembrando que esses atributos foram copiados lá da aplicação que criamos no site do firebase, por fim exportamos o nosso banco para podemos usarmos em toda nossa aplicação, e exportamos também uma constate que vai ser uma referência ao nosso banco de dados do firebase.

Vamos abrir o arquivo main.js e dizer ao Vue que vamos usar firebase para guarda nossos dados, e que vamos usar o plugin vuefire para manipular os dados com mais facilidade. O arquivo main.js deve ficar assim:

Criando nossa estrutura HTML

Agora precisamos criar a nossa estrutura em HTML para que o usuário possa preencher os dados dos produtos e salvar, para isso precisamos também criar uma função que realize esse evento de salvar os dados fornecido pelo usuário em nosso banco de dados do firebase. Vá até o arquivo App.vue e escreva o seguinte código:

Criamos quatros <input> e observe que eles contém a diretiva do VueJS v-model, caso não entenda como o v-model funcione temos uma série de artigos onde estudamos os conceitos básicos do Framework, clique aqui para ler

Importamos o productRef que exportamos lá do arquivo firebase lembra? Essa variável é que representa o banco de dados, criamos uma function addProduct() e damos um push() e atribuirmos o objeto product que será criado lá no banco e colocando o objeto que estamos capturando do usuário.

Nossa página ficará assim no browser:

Agora preencha os dados do produto, depois clique em salvar, não aconteceu nada certo?

Abra o inspecionar do navegador e vá até a aba console e lá vai está o seguinte erro Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied

Esse erro acontece porque a nossa aplicação não tem permissão para inserir dados em nosso database lá do Firebase, até porque ainda nem criamos o nosso banco de dados, para resolver esse problema vamos ao site do Firebase onde criamos nossa aplicação, e criar o banco fornesse ás permissões de leitura e escrita, siga os passos;

Passo 01: Clique em DataBase

Passo 02: Criar banco de Dados

Passo 03: Marque a opção iniciar em modo de teste, depois clicar no botão ativar

 

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Agora com o nosso banco de dados estar criado e com as devidas permissões, voltamos lá no browser preenchemos todos os dados do produto e clicamos em salvar, novamente não veremos nada acontece na aplicação e nenhum erro foi mostrado no console, vamos ao site do firebase e verificamos se nossos dados foram inseridos. Vá até a opção DataBase > dados

GRUD com VueJS e Firebase

CRUD com VueJS e Firebase

E aí está nosso dado salvo no banco de dados do Firebase.

Conclusões

Pessoal, vamos parar por aqui, pois senão o artigo ficará muito extenso, vou está dividindo esse artigo em partes. Semana que vem estarei publicando a parte 2, onde vamos codificar mais funcionalidades, vamos em breve estilizar usando o Vuetify, para dá uma cara legal a nosso pequeno sistema de gerenciamento de venda. Espero muito que tenham gostado, por favor deixa seu feedback nos comentários e compartilhar com seus colegas.

Explicações sobre não ter havido artigo semana passada (06/10/2018)

Fala galera, peço desculpas a todos que estão acompanhando meus artigos no blog, infelizmente não deu para escrever o artigo da semana passada, minha vida está muito corrida, estou em fase final de faculdade, fazendo TCC, semana de provas, tivemos também o período eleitoral onde tive que viajar para votar. Esses últimos 15 dias está sendo muito corrido para mim, espero que todos entendam, escrevo os artigos com muito amor e carinho, tentando sempre passar o pouco que para vocês.

Recomendações de Cursos e Livros

Curso Introdução ao Vue JS 2 – Udemy

Curso muito bom galera, recomendo demais para aqueles que querem sair do básico e avançar um pouco mais seus conhecimento no VueJS.


CLIQUE AQUI PARA VISUALIZAR O CURSO

Javascript. O Guia Definitivo

Esse livro é muito bom galera, muito completo tenho ele a algum tempo e me ajudou muito a entender o JavaScript de verdade, vale muito apena o investimento.

CLIQUE AQUI PARA VISUALIZAR O LIVRO