Copa do Mundo II: Aplicativo Ionic com aplicação Firebase

ionic-firebase

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.

 

ionic-firebase

 

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”.

 

Aplicativo Ionic consumindo aplicação Firebase

 

Copie a área destacada.

 

Aplicativo Ionic consumindo aplicação Firebase

 

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:

 

Aplicativo Ionic consumindo aplicação Firebase

 

No arquivo home.ts vamos adicionar o código abaixo.

 

Aplicativo Ionic consumindo aplicação Firebase

 

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.

 

Aplicativo Ionic consumindo aplicação Firebase

 

O aplicativo ficará assim:

 

 Aplicativo Ionic consumindo aplicação Firebase

 

Se alterarmos ou adicionarmos alguma linha na página da planilha, nosso aplicativo será atualizado em tempo real.

 

Aplicativo Ionic consumindo aplicação Firebase

 

Aplicativo Ionic consumindo aplicação Firebase

 

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

 

 

As novidades do Android Marshmallow

Mais um fim de ano chegando e com ele, nova versão do Android! Ano passado tivemos a versão Lollipop [1] e dessa vez, o doce Marshmallow está estrelando na versão 6.0 do Android. Nesta nova versão, não há grandes mudanças visuais, mas em quesito funcionalidades e otimizações do sistema operacional, ele está repleto de novidades! Bem, vamos para o que interessa: abaixo segue, em tópicos, as principais novidades.

Continue lendo “As novidades do Android Marshmallow”