No último post, criamos uma planilha Google, preenchemos com as informações das rodadas dos jogos da Copa do Mundo e integramos com uma aplicação Firebase, que através de configurações no script da planilha, as alterações nos valores da página serão enviados para a aplicação Firebase em tempo real. Agora, vamos ver como um aplicativo Ionic consome essa aplicação Firebase.
Por FLÁVIA FERREIRA DOMINGUES
Nosso foco não será a criação do aplicativo, iremos ver apenas a integração com o Firebase. Você pode seguir o tutorial deste post do blog Matera para criar um aplicativo Ionic do zero.
Com o nosso aplicativo criado, usaremos as bibliotecas firebase e angularfire2 para sincronizar os dados do Firebase. Para isso, execute npm install firebase@4.6.0 angularfire2@5.0.0-rc.3 --save no seu prompt de comandos.
Integração com Firebase
Primeiro, precisamos pegar algumas informações sobre a nossa aplicação Firebase. Clique no ícone de engrenagem no menu lateral e selecione “Configurações do projeto”. Depois navegue para a aba “Geral”. Nessa aba, clique em “Adicionar o Firebase ao seu aplicativo da Web”.
Copie a área destacada.
Abra o seu projeto, no diretório config/environment adicione as suas configurações em um arquivo .json.
No nosso exemplo, usamos assim:
-> config/environment/environment.dev.json
E adicionamos as informações copiadas do firebase:
No arquivo home.ts vamos adicionar o código abaixo.
Sobre o código:
Linha 12: adicionamos o parâmetro afDB do tipo AngularFireDatabase. Esse parâmetro irá permitir a chamada ao serviço de listagem do Firebase.
Linhas 13-17: chamando o método observable get1Rodada() e atribuindo o resultado a uma variável.
Linhas 20-22: método que retorna um observable com um json referente aos valores da página 1_RODADA que criamos na planilha Google.
Agora, é só colocarmos os valores no nosso html como exemplificado abaixo.
O aplicativo ficará assim:
Se alterarmos ou adicionarmos alguma linha na página da planilha, nosso aplicativo será atualizado em tempo real.
Visão final
Podemos ver a simplicidade de como construir um app Ionic e deixá-lo dinâmico com o poder do Firebase. A facilidade e simplicidade de edição das planilhas que provê uma forma de atualizar nosso conteúdo e ver essas mudanças acontecerem em tempo real graças ao RealTime Database do Firebase.
Agradecimentos especiais:
Marcelo Marcelino do Nascimento
