Como programar um banco de dados em 1 dia! (com Ionic e Firestore)
A programação com banco de dados (CRUD) tem se tornado cada vez mais fácil; bases não relacionais (NoSQL) têm simplificado muito a nossa vida. Por fim, a junção da framework Ionic com o banco de dados Firestore terminou de tirar praticamente toda a complexidade desse processo.
Mas Atenção! para fazer esse tutorial aqui é necessário anteriormente fazer o outro tutorial que ensina a criar um primeiro programa em Ionic e conectar com a plataforma Firebase. Acesse o link e faça o tutorial abaixo:
https://medium.com/como-programar-em-1-dia/como-fazer-um-app-em-1-dia-com-ionic-e-firebase-e3a3dd1bc84b
DÚVIDAS??
Qualquer dúvida ou comentário e também para postar os resultados de seu aplicativo com banco de dados, pode utilizar os comentários aqui do próprio Medium, ou então entre para o nosso grupo no Telegram:
@APPem1dia!
https://t.me/APPem1dia
Instalando tudo
Seguindo o tutorial acima, vamos primeiramente criar um aplicativo no Ionic. Comece instalando o Node.js, depois instale o Ionic com os comandos
“npm install -g @angular/cli” e “npm install -g ionic”. Com o comando “ionic start”, selecione a linguagem Angular, e crie um aplicativo com a opção “side menu”.
Depois instale a ferramenta cliente do Firebase com os comandos
“npm install firebase” e “npm install -g firebase-tools” e dê o comando “firebase login”.
Instale o hosting e o Firestore com o comando “firebase init” e crie um novo projeto no Firebase.
Agora autentique-se no console do Firebase, clique em seu projeto que acabou de ser criado, vá no menu “Cloud Firestore” e autorize a instalação clicando no botão “Create database”:
https://console.firebase.google.com
Selecione o item “Start in production mode” na próxima tela. Depois selecione a localização “(us-central)” e clique no botão “Enable”.
Ainda no console do Firebase, clique no menu “Hosting” e depois no botão “Get Started”:
Clique nos botões “Next” até o final da configuração do Firebase Hosting:
Por último, abra o menu “Settings”, cujo ícone fica no canto superior do menu lateral, e clique na opção “Project settings”.
No item “Web apps” e “Firebase SDK snippet”, selecione o item “Config” e observe o código de configuração do Firebase gerado pelo console para o seu aplicativo.
Agora com o Cloud Firestore liberado, execute novamente o comando “firebase init” e complete sua inicialização:
Configurando o Firestore
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.
Criando um formulário
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 abaixo dentro do arquivo .html da sua página para gerar o formulário de exemplo do nosso tutorial.
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.
Serviço de acesso ao banco de dados
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),
Salvando um registro
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.
Listando os dados
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>”, como no código abaixo:
Copie e cole o código acima dentro do “<ion-content>” de sua página HTML. 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
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”.
Só abrir o “Hosting URL”! No nosso caso: https://db1dia.web.app/
Editando um registro
Agora vamos adicionar código para editar um registro já salvo no banco de dados.
Adicione o código abaixo 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:
Curta o resultado
Teste novamente todo esse fluxo de dados em sua máquina local através do comando “ionic serve”.
Depois, atualize a aplicação no host do Firebase através dos comandos “ionic build — prod” e “firebase deploy”.
E finalmente curta o seu novo app funcionando com os dados sendo salvos em um banco de dados na cloud:
