Firebase is a development platform by Google that is quick and easy to set up. Neste tutorial, vamos criar uma aplicação básica integrando Firebase / Firestore e Angular. Nós estaremos usando um pacote chamado AngularFire-a biblioteca Angular oficial para Firebase — bem como o próprio Firebase SDK.

A utilização de serviços em nuvem está a tornar-se cada vez mais popular, uma vez que poupa tempo a não ter de criar a sua própria segurança, manutenção, etc. Com o Firebase do Google, vamos criar um Firestore gratuito para atuar como nosso banco de dados.o Firebase também oferece um banco de dados em tempo real, mas armazena tudo em uma grande árvore JSON.

Isto torna uma base de dados mais simples, mas com a nuvem Firestore, que é o que vamos usar, Existem documentos flexíveis, tornando-o mais escalável para dados maiores. Firestore também é mais rápido e globalmente mais intuitivo se você não estiver familiarizado com bases de dados.

configure a consola Firebase

terá de começar por configurar o seu projecto na consola Firebase. Primeiro, vai aqui procurar a consola.

crie um projeto, dê-lhe um nome e siga os passos. Uma vez terminado, você estará na visão geral do projeto.

não precisamos adicionar um aplicativo. Você deve estar na página de Visão Geral do projeto. Aqui você verá “comece adicionando Firebase para sua aplicação”.

faça isso clicando no botão”<> ” (isto é para adicionar uma aplicação web). Você pode configurar hospedagem aqui, mas não vamos cobrir isso neste tutorial.

vá em frente e registe a aplicação. Na página seguinte, você verá scripts para configurar o SDK Firebase. Estes são úteis, mas veremos mais tarde como obter tudo o que precisamos se você não vê-los nesta página. Continue a consolar.

inicializar o Firestore e criar os primeiros documentos

na consola Firebase, na área esquerda, em desenvolvimento, poderá encontrar a página da Base de dados. Clique nele, e você será trazido para uma página onde você pode clicar em “Criar banco de dados”. Irá aparecer um modal onde poderá seleccionar o modo de produção ou o modo de teste; queremos o modo de teste. É inseguro, mas bom para testes.

Se continuar, ser-lhe-á pedido para seleccionar um local. Vá em frente e escolha o apropriado. Assim que carregares, vai demorar alguns minutos a preparar o Firestore.quando estiver completo, estará no seu Firestore. Vá em frente e selecione “Iniciar a coleção”.

um screengrab da consola para configurar o seu projecto Firebase.

um screengrab da consola para configurar o seu projecto Firebase.

ele irá pedir-lhe para criar um ID de colecção; por exemplo, vamos apenas chamá-lo de “testCollection”. Carregue em seguida e irá levá-lo ao formulário para criar o seu primeiro documento.

deixaremos o ID do documento em branco-o Firestore irá gerar automaticamente isto para si. Em campo, escreva “campo”. Então você verá “string” como o Tipo padrão. Não há razão para mudar isto por agora, por isso deixa-o como está. Em Valor, digite Em “value 1”. Carregue em gravar e verá que criou o seu primeiro documento!

para o nosso exemplo mais tarde, vamos criar um segundo documento. Na coluna do meio você verá ” + Adicionar documento.”vá em frente e clique nisso e você será trazido de volta para o formulário de criação de documentos.

Aqui, basta digitar “campo” sob o campo e “valor 2” Sob O valor. Clique em gravar. Agora temos dois documentos.

iniciar um novo projecto Angular

vamos fazer o nosso projecto de interface com o CLI Angular (interface da linha de comandos). Abra a janela do terminal e instale o CLI Angular globalmente:

npm install -g @angular/cli

com esta instalação, poderá executar o comando ng.

no terminal, escreva o seguinte:

ng new your-app-name

pode nomear o seu projecto o que desejar.

Uma vez iniciado, o CLI Angular levá-lo-á através de algumas opções de configuração.

Você pode adicionar roteamento, e então escolher o formato de ‘stylesheet’ que deseja que o Angular gere para a sua aplicação.

depois disso ele vai passar pelo resto e criar o seu aplicativo Angular.

Uma vez terminado, vá em frente e mude a pasta de terminal para a que acabamos de fazer:

cd your-app-name

na pasta da aplicação Angular, você pode executar ng serve construir e servir a sua aplicação localmente.

configure a Firebase na aplicação Angular

vamos obter a Firebase SDK executando o seguinte no seu terminal dentro da sua pasta de Projecto Angular:

npm i --save firebase

Agora a Firebase é adicionada ao seu projecto.

vá para a consola Firebase. No menu à esquerda você verá “Visão Geral do projeto” com um ícone de engrenagem ao lado dele. Carregue no ícone e depois na configuração do projecto na janela pop-up. Aqui, vá para a guia geral, e role para o fundo.

em “Firebase SDK snippet”, carregue no fundo do rádio ao lado do CDN (por omissão está no automático). Aqui, você vai encontrar tudo o que você precisa para conectar o seu aplicativo para Firebase. F

ind the firebaseConfig variable — we will need to copy this information into the Angular App. Parece-se com isto (excepto que tudo será preenchido correctamente):

dentro da sua aplicação Angular, navegue para o ficheiro gerado app.module.ts (se criou o seu projecto Angular através do CLI: src > app > app.module.ts). Neste ficheiro, pode colar a totalidade da variávelfirebaseConfig (por baixo das importações está bem).

a próxima ordem de trabalhos é descarregar o pacote npm angular/fire. Com este pacote você será capaz de interagir com Firebase com facilidade.

Você pode instalar o pacote em seu projeto com a seguinte linha de código:

npm i angular/fire

Com esta instalado, podemos adicioná-lo aqui app.module.ts arquivo:

import { AngularFireModule } from @angular/fire';

Agora, nas importações de matriz, inicializar Firebase em seu aplicativo, adicionando a seguinte linha de código:

AngularFireModule.initializeApp(firebaseConfig)

Esta importação é para a Firebase em geral, mas se quisermos adicionar certos serviços, terá de Os adicionar individualmente.

Para o Firestore, adicione esta na parte superior do arquivo:

import { AngularFirestoreModule } from '@angular/fire/firestore';

em Seguida, nas importações matriz perto de fundo:

AngularFirestoreModule

Implementar o aplicativo

neste momento, pode fazer sentido para criar um componente ou dois no nosso Angular aplicação. Você pode criar um novo componente em sua aplicação usando o CLI em seu projeto.

Let’s make a home component by typing the command in the terminal:

ng g c home

The” g c “stands for”generate component”. Isto irá gerar uma pasta pessoal com quatro ficheiros sob ela: um ficheiro HTML, um ficheiro SCSS (ou seja qual for o estilo que está a usar), um ficheiro TypeScript e um .ficheiro spec.

Se quiser ignorar a adição do .ficheiro spec, proponha esta opção ao seu comando gerar:

ng g c home --skipTests=true

estaremos a fazer a nossa lógica no nosso componente doméstico, mas não nos esqueçamos de a adicionar no nossoapp.component.html ficheiro. Você pode sempre adicionar componente home ao router, mas por simplicidade, vamos apenas adicioná-lo no HTML.

Se configurar um componente doméstico tal como eu, o selector será “app-home”, para que o possa adicionar algures no app.component.html ficheiro como este

<app-home></app-home>

Depois disso, vamos começar a fazer as nossas operações no componente doméstico.

anteriormente criamos uma coleção em nosso Firestore chamada testCollection; dentro dela, existem dois documentos ou objetos. Vamos primeiro analisar a” leitura ” destes dois documentos do nosso Firestore.

Leia

home.component.ts arquivo, nós podemos importar o Firestore através do nosso Angular/fogo pacote:

import { AngularFirestore } from "@angular/fire/firestore";

Depois de importar, podemos inicializá-lo em nosso construtor como este:

constructor(private firestore: AngularFirestore) {}

Que é a atribuição de nossa importados AngularFirestore o pseudônimo de “Firestore” — dê a ele o nome que você gosta.

a funçãongOnInit é um lugar perfeito para ler a partir do Firestore ao largo do gitgo.

dê uma olhada neste código:

this.firestore .collection("testCollection") .get() .subscribe((ss) => { ss.docs.forEach((doc) => { this.myArray.push(doc.data()); }); });

Vamos passar por este passo a passo: como você provavelmente sabe, this.firestore refere-se ao apelido que criamos para o nosso AngularFirestore no nosso construtor.

o .collection('testCollection')é a forma como nos referimos à colecção que criámos anteriormente, e o.get() está simplesmente a dar-nos essa colecção inteira (iremos cobrir a pesquisa de documentos únicos dentro da colecção mais tarde).

When we.subscribe to the firestore, it is essentially asynchronously waiting on API to return data. Tecnicamente, subscrever vem de RxJS e é um observável que irá atualizar quando houver uma mudança.

Now, the Firestore always returns snapshots of data, which is why we gave it the alias of ss. Sob o instantâneo de nosso banco de dados estão os docs, que são os dados que queremos, e podemos usar o método .forEach array, para circular sobre a matriz de docs.

no exemplo acima, temos odoc.data() do Firestore Firebase. Este será todo o documento, que no nosso caso é um objeto com uma propriedade. Portanto, quando nós empurrá-lo para a nossa matriz, precisamos inicializar a matriz de como o código a seguir:

myArray: any = 

Isto permite-nos ver em nosso HTML, apagar o que está lá, e substituí-lo com o seguinte:

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul

Uma lista completa no HTML com dois valores.

uma lista completa em HTML com dois valores.óptimo! Lemos com sucesso os dados do nosso Firestore.

Write

Primeiro, vamos adicionar ReactFormsModuleapp.module.ts, como este:

import { ReactiveFormsModule } from "@Angular/forms";

Also, addReactiveFormsModule to the import array near the bottom.

In our file, let’s add a form to capture and send new data. Escrever algo como:

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

Agora, se você usou o código HTML acima, adicione o seguinte importar para o nosso home.component.ts arquivo:

import { FormControl, FormGroup } from "@Angular/forms";

Então, na nossa classe, adicione:

form = new FormGroup({ newValue: new FormControl('') })`

Isto irá aceitar HTML, o formulário e a entrada fizemos, com o formControlName de newValue.

assim, vamos obter a string introduzida pelo usuário no HTML e irá enviá-la para ser o valor de um novo documento em nosso Firestore. Podemos fazer isso usando a função a seguir:

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

da mesma forma, podemos ler a partir do nosso Firestore, vamos escrever, desta vez usando a mesma referência para receber a nossa coleção:

this.firestore.collection('testCollection')

Neste momento, iremos adicionar um documento com .add. Queremos adicionar o objeto com o nosso texto que recebemos:

.add({field: this.form.valule.newValue})

isto pode parecer estranho, mas é porque estamos recebendo o valor da forma. Lá, obtemos a propriedade que nomeamos newValue. É por isso que é value.newValue.

O resto da função é simplesmente um .then e .catch para lidar com a resposta do Firestore.

ao escrever para o Firestore, a resposta (quando bem sucedida) será um objeto grande e estranho.

Uma vez que não estamos lendo nada, o único uso destes manipuladores é se queremos fazer algo imediatamente após escrever para o Firestore (como fazemos ao chamar .reset() para limpar a forma).

Se Continuar e executar a aplicação como está (ng serve), irá notar que não irá aparecer na nossa lista depois de introduzir um novo valor e enviá-lo para o Firebase. Você pode atualizar a página e ela deve aparecer, se a escrita foi bem sucedida. Porquê?

é porque depois de escrevermos para o nosso Firestore, não lemos a nova mudança. Com a forma como a nossa funçãongOnInit

está configurada, não estamos a observar alterações.

A fim de ver os novos dados, precisamos mudar como estamos lendo os dados:

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

Agora nós subscrevemos. Você verá que depois de adicionar um novo documento à base de dados, ele também será adicionado à lista em nosso aplicativo. A principal diferença é que agora estamos subscritos a .valueChanges().

Query

Let’s add another form we can use to query the Firestore based on a document’s value:

<form ="this.secondForm"> <input placeholder="value1" formControlName="valueToGet" type="text" class="input-field col s12" /> <button (click)="onQuery()"> Query </button></form>

Por simplicidade, é exatamente como a primeira forma, mas com nomes diferentes e uma função diferente. Vá em frente e diga o nome como quiser, mas certifique-se de usar os novos nomes e não os que usamos no formulário anterior.

Sobre o ficheiro transcrito de modo, certifique-se de inicializar o formulário no topo da classe:

secondForm = new FormGroup({ valueToGet: new FormControl('') })

além disso, até aqui onde nós inicializar tudo, adicione single: any; como uma variável para colocar o nosso documento consultado, e message: string; como uma variável para mensagens de erro.com isso, vamos começar a construir a nossa função onQuery.

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

em primeiro lugar, vemos se o utilizador introduziu alguma coisa. A entrada pode ser encontrada em this.secondForm.value.valueToGet.

assim, se estiver vazio, queremos devolver uma mensagem e não enviar um texto vazio para consultar a base Firebase. Nesta verificação “se”, eu também certifico-me de que a nossa variável” single ” está vazia, porque podemos ter questionado com sucesso antes, mas agora só queremos enviar a mensagem de que o formulário não pode estar vazio.

Se não estiver vazio, vamos em frente e questionamos o nosso Firestore. Você vai notar algo novo no parâmetro “coleção” – em Angular nós realmente fazemos a consulta bem dentro desse parâmetro. refé uma referência à coleção, e é a maneira mais comum de consultar documentos em uma coleção Firestore.

In The .where method, we first tell Firebase what field to query within each document. Todos os nossos campos são simplesmente “campo”, o que torna tudo mais fácil.

então, usamos um comparador, ==, que é perguntar se o campo isEqual. Você também pode usar outros comparadores como <>=, e assim por diante.

Finalmente, o terceiro parâmetro é dizer Firebase que para comparar o campo — em nosso caso, queremos colocar o valor de entrada do usuário aqui e ver se ele aparece como um valor em qualquer lugar em nosso Firestore.

uma nota rápida sobre uma limitação do Firestore: questionar com o método é limitado.

Você pode verificar algo que está desligado por uma letra, ou é minúsculo onde o Fiel tem gravado como maiúscula, e ele não irá devolvê-lo. Você pode fazer coisas no frontend para ajudar, como fazer cada entrada de usuário em minúsculas para corresponder ao Firestore, mas isso só pode ir até certo ponto.

claro, você pode puxar todo o Firestore para o frontend (como estamos fazendo). Embora questionar seja melhor, pode não ser ideal se o seu Firestore é gigantesco. A maneira sugerida para fazer uma pesquisa de texto completo é usar Algolia.

We will .get()since we are reading the value, and we will.subscribe as we did when reading the entire collection.

no entanto, depois de obtermos a foto do Firestore, queremos colocar um “se” verificar, para ver se alguma coisa é devolvida. Você pode console.log a fotografia e veja se não estará vazia, mesmo que não haja correspondência no Firestore.

mas, a propriedadedocs na fotografia estará vazia (uma lista vazia para ser exacta) se não houver correspondência para a nossa pesquisa. É assim que podemos dizer se a nossa consulta corresponde a alguma coisa ou não.

Mais uma vez, vamos enviar de volta a mensagem e definir a variávelsingle para null. Se encontrarmos uma correspondência, então queremos fazer o oposto, definindo a mensagem como vazia, e definindo a variávelsingle para os dados devolvidos.

Agora que temos os dados, vamos voltar para . Vamos adicionar algum HTML para lidar com as nossas variáveis “mensagem” e “single”:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

muito simples aqui. Nós usamos a diretiva *ngIf para mostrar apenas o documento correspondente se ele for encontrado. Como você se lembra, definimos “single”como nulo se não fosse encontrado, assim todo o *ngIfdiv estaria escondido. O mesmo acontece com a “mensagem” — se estiver configurada para uma cadeia vazia.

Você também vai notar que adicionamos botões para a nossa próxima seção, uma vez que ainda precisamos ser capazes de editar e excluir!

Update

algo que irá nos ajudar muito a partir daqui para fora é obter o id do documento que temos questionado.

sabemos que só vamos editar ou excluir esse documento questionado, por isso vamos obter o seu id. Como você pode notar, quando criamos documentos a partir do nosso aplicativo, não lhes damos um id.

Plus, when we created our documents in the Firestore at the beginning, we let the Firestore automatically generate the ids; the same happens with the ones we create from our app. Então, como obtemos o ids?

nossa onQuery função, vamos definir uma referência para o nosso banco de dados de uma consulta como esta:

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

Quebrar o .get() e depois de tudo isso, em seguida, em outra linha, use a nossa referência, como este:

docRef.get().subscribe(ss => ...)

…E assim por diante. É essencialmente a mesma coisa.

Agora, sob o método de subscrição, vamos adicionar outra linha para obter o documento id:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

é claro que vamos precisar inicializar this.id no topo: id: string = ''. Mas, agora temos o id para usar em nossas funções de edição e delete que vamos criar.

de Volta em nosso home.component.html arquivo, altere o botão de edição de nós criado anteriormente para o seguinte:

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

Com este openEdit() função, no nosso arquivo TypeScript, podemos inicializar uma edição variável:

edit: boolean = false

E crie o openEdit função para alternar entre:

openEdit() { this.edit = !this.edit};

cada vez que a função é chamada, fará com que a variável edit Vá de false para true, ou true para false.

agora, em nosso arquivo HTML, adicione o seguinte formulário. Ele aparecerá quando editar for verdadeiro:

novamente, outro formulário. O importante aqui é que não vamos substituir todo o doc — vamos manter o id, mas o campo vai mudar para o que quer que introduzamos aqui — esse é o objetivo.

In home.component.ts, inicialize a variável message2 para lidar com uma entrada vazia e inicialize a forma como fizemos com as outras. Em seguida, criar uma função onRename.

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

Existem algumas coisas novas para notar aqui.

Em Primeiro Lugar, usamos .doce colocamos no métodoid obtivemos dos passos anteriores. Isso obtém o documento baseado noid, Não uma consulta.a seguir, usamos o método .update. Isto só irá sobrepor a propriedade que especificamos, em vez de .set que substitui todo o documento. Em outras palavras, se tivéssemos três campos no documento, poderíamos sobrepor apenas um com o método de atualização assim.mais uma vez, relemos a nossa lista de documentos do Firestore. Em seguida, podemos fechar a consulta única, caixa de edição, e quaisquer mensagens anteriormente lá.

Delete

a delete que vamos fazer é basicamente a mesma que a nossa atualização, exceto que vamos usar o método de delete.em primeiro lugar, no nosso html, vamos alterar o botão Apagar:

<button style='background-color: red' (click)='delete()'>Delete</button>

Now, all there is, is to create the function.

pode ser sensato colocar um aviso, antes de permitir que o usuário exclua o objeto. Adicione o seguinte código para o ficheiro Transcrito:

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

confirm('Delete') irá aparecer um alerta que deve ser confirmada antes da exclusão, ele só salva o usuário acidentalmente apagar algo acidentalmente.

depois disso, nós simplesmente obtemos o documento pelo id nós armazenamos, e chamamos o método de delete nele. Tão simples quanto isso.

conclusão

agora criou com sucesso uma aplicação Angular que pode criar, ler, actualizar e apagar os documentos Firestore! Como você pode ver, Firebase Firestore é fácil de usar e pronto para ir. Isto pode facilmente ser aumentado para milhares de documentos complexos.

Agora que você tem uma boa idéia do básico Firestore, confira os documentos oficiais para tópicos mais avançados.

experimente suas aplicações angulares exatamente como um usuário faz

Debugging aplicações angulares pode ser difícil, especialmente quando os usuários experimentam problemas que são difíceis de reproduzir. Se você está interessado em monitorar e rastrear o estado Angular e ações para todos os seus usuários em produção, tente LogRocket. LogRocket Painel de Avaliação Gratuita Bannerhttps://logrocket.com/signup/

LogRocket é como um DVR para aplicações web, gravação, literalmente, tudo o que acontece no seu site, incluindo solicitações de rede, erros de JavaScript, e muito mais. Em vez de adivinhar por que os problemas acontecem, você pode agregar e relatar em que estado sua aplicação estava quando um problema ocorreu.

o plugin Logrocket NgRx regista o estado Angular e as acções da consola de LogRocket, dando-lhe um contexto em torno do que levou a um erro, e em que estado a aplicação estava quando ocorreu um problema.

Modernize como depurar as suas aplicações angulares-inicie a monitorização gratuitamente.

Deixe uma resposta

O seu endereço de email não será publicado.