Como programar um Banco de Dados em 1 dia!

Agora abra seu editor de código preferido (no nosso caso aqui vamos utilizar o Visual Studio Code), e importe a pasta gerada pelo Ionic com os arquivos de código do seu aplicativo.

Procure os arquivos “src/environment.ts” e “src/environment.prod.ts” e cole o código de configuração do seu aplicativo que vimos anteriormente gerado lá no console do Firebase.

Corrija toda a sintaxe do código copiado para que ele possa ser compilado corretamente dentro do arquivo .ts, como na figura acima. Faça o mesmo para os dois arquivos de environment.

Para visualizar o aplicativo inicial gerado pelo Ionic, digite o comando “ionic serve” na janela de comando e aguarde o navegador web abrir com o seu novo aplicativo rodando no servidor web local chamado localhost.

Voltando à janela de comandos, dentro do diretório “/scr/app” dos arquivos seu aplicativo digite o comando: “ionic generate” para criarmos uma página nova, onde vamos gerar um formulário de cadastro de feedback, como exemplo aqui desse tutorial.

Selecione a opção “page” e digite o caminho e o nome da nova página que deseja gerar.

Agora voltando ao seu editor de código, copie e cole o código html do formulário disponível no tutorial do Medium, dentro do arquivo .html da sua página para gerar o formulário de exemplo.

Para visualizar todo esse código criado até agora, digite o comando
“ionic serve” na janela de comando e aguarde o navegador web abrir com o seu novo aplicativo rodando no servidor localhost.

Altere a url da página do aplicativo para o nome da sua página e atualize o navegador:
http://localhost:8100/feedback

Você verá os campos do formulário criado renderizados na tela.

Vamos agora criar um serviço auxiliar no código de nosso aplicativo que fará a conexão e a comunicação com o banco de dados, no caso o Firestore.

Digite “ionic generate” novamente na janela de comandos e agora selecione a opção “service”.

No arquivo “feedback.service.ts” gerado, importe o plugin do Firestore para Angular através das linhas de código abaixo:
import { AngularFirestore } from ‘@angular/fire/firestore’;

E depois inicialize no construtor da classe, como na figura abaixo:
private firestore: AngularFirestore

Para que a importação funcione localmente, instale o mesmo plugin na sua máquina utilizando o instalador de pacotes npm:

“npm install @angular/fire”

Também é necessário importar o plugin no arquivo “app.module.ts” do seu projeto no Ionic, como na figura abaixo:

import { environment } from ‘src/environments/environment’;
import { AngularFireModule } from ‘@angular/fire’;

E depois inicialize o plugin com a autenticação padrão do Firestore para quando o código do aplicativo for hosteado pelo próprio Firebase (que será o nosso caso):
AngularFireModule.initializeApp(environment.firebaseConfig),

Vamos agora adicionar o método “saveFeedback()” no serviço que criamos. Este método irá fazer de fato o envio dos dados digitados pelo usuário direto para o banco de dados.

Observe a chamada para o método “add” de uma collection do Firestore. Se a collection não existe ainda, o plugin do Firestore cria automaticamente.

Dentro da chamada “add” passamos os dados de mensagem e contato digitados pelo usuário, além do valor da data atual.

O retorno da função “add”, quando bem sucedido, receberá o registro adicionado ao banco de volta dentro da variável “result”. E pegaremos o “id” desse registro novo e devolveremos como valor de retorno da função.

E após a execução assíncrona da chamada “add”, o “id” do novo registro é atualizado no registro corrente na memória do aplicativo através da variável “currentFeedback”.

No código HTML, no arquivo “feedback.page.html”, observe a chamada da função “sendForm()” no parâmetro “submit” da tag “<form>”. Esse é o nome da função que está dentro do arquivo “feedback.page.ts” que será chamada quando o usuário pressionar o botão “Enviar” do formulário.

Copie e cole o código da função “sendForm()” abaixo dentro do arquivo “feedback.page.ts” da sua página.

sendForm() {
  this.feedbackService.currentFeedback[“message”] = this.messageField;
  this.feedbackService.currentFeedback[“contact”] = this.contactField;
  this.feedbackService.saveFeedback();
}

Observe as variáveis “messageField” e “contactField” criadas no arquivo “feedback.page.ts” que recebem os valores dos campos do nosso form do arquivo HTML. Isso acontece automaticamente porque lá no arquivo HTML todos os campos têm o atributo “ngModel” que captura os valores digitados pelos usuários.

A variáel “currentFeedback”, do serviço “feedbackService”, vai armazenar e transportar o estado atual do feedback atual sendo manipulado pelo usuário que está na memória do aplicativo. É esse estado atual que será gravado no banco de dados quando a chamada do método “saveFeedback()” é realizada.

O próximo passo agora será listar na tela os feedbacks recebidos pelo cadastro.

Para isso vamos criar o método “listFeedback()” no arquivo de serviço “feedback.service.ts”.

O método “listFeedback()” é assícrono porque as chamadas para o banco de dados Firestore são assíncronas e requerem um chamada no estilo “Promise()” com “resolve()”.

A listagem ocorre através da chamada à collection (no caso “feedback”), passando como referência cláusulas “where()”, se for o caso, e/ou “orderBy()”, etc.

A chamada “resolve()” após o “subscribe()” na collection, retornará o resultado da listagem de forma assíncrona para após a chamada “Promise()”. E no caso acima, já retornará o mesmo como resultado da função “listFeedback()”.

Já o componente de listagem dos dados na tela é feito na página HTML através das tags “<ion-list>” e “<ion-item>”.

Observe que a tag “<ion-item>” tem uma função de loop (“for”) do Angular “*ngFor” que itera a variável de listagem “feedbackList” e retorna cada um dos itens da lista na variável “feedback”.

Dentro do loop “*ngFor”, os campos do objeto “feedback” são listados individualmente com os valores por exemplo de “datetime”, “contact” e “message”. Observe que o campo “datetime” precisa de um tratamento especial para formatação da data.

E por último, tem que fazer a associação do formulário HTML ao serviço do bando de dados através do arquivo “feedback.page.ts”.

Crie e inicilize a variável “feedbackList” para preencher os dados da listagem na tela HTML:

feedbackList = [];

Então acidione o método “listFeedback()” que irá chamar o serviço de bando de dados e enviar o resultado da listagem para a tela HTML. Observação: Este método é assíncrono (“async”/”await”) porque o serviço “listFeedback()” é assíncrono.

async listFeedback() {
var list = await this.feedbackService.listFeedback();
this.feedbackList = Object.keys(list).map(key => list[key]);
}

E por último, faça a chamada ao método “listFeedback()” dentro do construtor do “feedback.page.ts” e também atualize a lista sempre que salvar um novo registro de feedback no banco de dados, dentro do método “sendForm()”.

Após essas alterações de código, dê um “ionic serve” e teste o funcionamento da listagem e do cadastro localmente.

Para ver como tudo está armazenado lá no banco de dados, verifique no console do Firestore:

https://console.firebase.google.com

Agora vamos adicionar código para editar um registro já salvo no banco de dados.

Adicione o código no serviço “feedback.service.ts” para fazer as funções de “get()”, “update()” e “delete()” no banco de dados.

A função “getFeedback()” busca o registro no banco de dados através do valor do campo “id”. Coloca então o resultado na váriavel “currentFeedback()” e retorna também o resultado para ser exibido na tela.

A função “updateFeedback()” também busca o mesmo registro no banco de dados, porém já atualiza os seus atributos com os novos dados passados como parâmetro.

E a função “deleteFeedback()” busca o registro no banco de dados e já o deleta.

Adicione agora um evento “click” que chama o método para editar o registro corrente, em cada item do formulário na página HTML. Como no exemplo abaixo:

<ion-card (click)=”editFeedback(feedback.id)”>

E então crie o método “editFeedback()” no arquivo “feedback.page.ts” para receber esse evento “click” e enviar os novos dados editados pelo usuário para o serviço que irá atualizá-los no banco de dados:

async editFeedback(id) {
  var feedback = await this.feedbackService.getFeedback(id);
  this.messageField = feedback[“message”];
  this.contactField = feedback[“contact”];
}

E por fim, atualize o método “saveFeedback()” do serviço “feedback.service.ts” para diferenciar os comando de edição ou salvamento ou atualização de um registro digitado pelo usuário.

Para fazer o upload do aplicativo para o host do Firebase, realize primeiramente o build do Ionic digitando o comando “ionic build — prod” e depois suba os arquivos de build gerados para a cloud através do comando “firebase deploy”.

E finalmente curta o seu novo app funcionando com os dados sendo salvos em um banco de dados na cloud.