Desenvolvendo um CRUD com VueJS e Firebase Parte 2

Desenvolvendo um CRUD com VueJS e Firebase Parte 2

22/10/2018 0 Por Alisson Suassuna

E ai galera, o artigo dessa semana, vamos dar continuidade ao nosso sistema de gerenciamento de vendas, CRUD com VueJS e Firebase, para que você consiga fazer a parte prática desde artigo é preciso que tenha lido a parte 1. Nosso sistema já está salvando os dados no banco do Firebase, mas ainda não conseguimos renderizar esses dados na tela. Então vamos lista esses dados do banco de dados.

Listando Dados na Aplicação

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Vamos ao diretório onde está nossa aplicação, abra o terminal ou CMD (para quem usa Windows) e executar o seguinte comando:

Vamos inicia a codificação abra o arquivo App.vue:

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

A linha 2 a 8 criamos um simples estrutura HTML, onde temos uma <div> dentro desta temos <ul> e <li>, na tag <script> da linha 12 a 14 criamos um objeto firebase onde  importamos o objeto que representar os dados do banco de dados, o importe está no inicio da tag <script>  import { productRef } from ‘./database/firebase’

Observe que temos a diretiva v-for do VueJS caso você não tenha familiaridade temos vários artigos introdutório clique aqui para acessa-los parte 1, parte 2 e parte 3. A diretiva v-for funciona como o for of da linguagem JavaScript, note que também precisamos usar a diretiva v-bind:key fazemos isso para associar a chave a cada produto, essa key é o ID do banco de dados gerado automaticamente pelo próprio Firebase.

Remoção de Dados

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Implementando o método para remover os dados cadastrados no banco de dados:

Criamos uma <div> e um <button> e escrevemos a diretiva @click e atribuímos o nome da função de remover o dado, passamos como o argumento o produto no qual queremos fazer a remoção, e para sabermos qual dado remover filtramos o ID no, neste caso a key do produto.  Na função removeProduct() usamos a referencia do objeto que representa o Firebase, esse método child() obtém uma referência para o local no caminho relativo especificado, em nosso caso o objeto que queremos manipular, usamos a função  da própria API do firebase remove() para remover o dado.

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Quando fazemos a inserção dos dados, note que os dados anteriores ficam nos <input> precisamos resolver isso, quando o cliente digitar todas as informações e clicar em salvar, os campos tem que limpar, adicione esse código ao método addProduct()

Pronto, problema resolvido, agora quando o cliente clicar em salvar todos os campos serão limpos.

Editando dados

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Para que possamos fazer essa funcionalidade, vamos precisar remover todos os dados do banco de dados, como já fizemos a função de remover, fica mais tranquilo,  iremos adicionar um novo atributo chamado edit no método addProduct(), e criar a função de editar o dado. Vamos ao código:

Depois de adicionar o novo atributo a função addProduct(), criamos a função setEditProduct(), agora testamos para ver como está se comportando nosso sistems, recomendo que você abra o banco de dados do firebase, veja a imagem a seguir:

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Note a função está funcionando, o atributo edit está sendo modificado de  acordo com o clique do usuário, agora vamos prosseguir com a implementação:

Vamos fazer a função de backEdit()

Teste sua aplicação, o comportamento é para está da seguinte forma, quando clicar em editar, deverá aparece o input e os dois <buttons> e quando clicar em voltar,voltará. Veja a imagem:

CRUD com VueJS e Firebase

CRUD com VueJS e Firebase

Agora vamos fazer a função para editar o dado de fato que é a saveEdit():

Nesta função recebemos como parâmetro o produto que vamos editar, mas para saber qual capturamos o ID na const key e passamos para a função child() que já foi explicada a cima, e para de fator editar usamos a função set() ela substitui os dados salvos no banco por esse novo objeto que passamos como parâmetro da função.

Conclusão CRUD com VueJS e Firebase

O nosso sistema de gerenciamento de vendas está quase pronto, já conseguimos salvar, listar, editar e remover, está faltando fazer nossa pesquisar por nome e deixa nosso sistema um pouco mais bonito, usando o vuetify, tudo isso será feito na parte 3 da série, aguardem.

Repositorio do código no github clique aqui<<<<

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