Mobile

15 mar, 2019

Integrando Firebase no seu aplicativo Ionic

Publicidade

Antes de mais nada, o que é Firebase?

Segundo as próprias informações do site:

  • “Uma plataforma de desenvolvimento abrangente para dispositivos móveis. O Firebase pode ajudar a enfrentar desafios complicados, seja você um desenvolvedor, profissional de marketing ou gerente de produtos.”

Nossas ferramentas operam em conjunto para que as equipes de dispositivos móveis possam receber insights valiosos e criar uma ótima experiência de usuário.

Lembretes/avisos importantes:

  • Você precisa ter instalado e configurado o Android Studio
  • Usei o vysor para espelhar meu dispositivo no computador
  • Lembre-se de deixar apenas uma IDE aberta, caso esteja usando mais uma além do Android Studio (no meu caso tive problemas quando deixei o Visual Studio Code e o Android Studio abertos ao mesmo tempo)

Para começar, vamos fazer três itens:

  • 1. Verificar se suas ferramentas estão com a versão correta
  • 2. Criar um projeto usando o Firebase Console
  • 3. Alterar no seu app Ionic para conseguir desenvolver com o Firebase

Comece verificando se a versão do Google Play Services no seu dispositivo é a versão 9.0 ou superior.

Depois disso abra o Android Studio > SDK Manager > SDK Tools e verifique se o Google Play Service está com a versão igual ou superior a 30, e se o Google Repository está com a versão 26 ou superior.

Gif verificando versão do Google Repository

Se estiver tudo ok, você pode começar a usar o Firebase, e lembre-se de sempre manter atualizadas.

Agora acesse o Firebase Console – é lá que você vai criar seus aplicativos.

Abaixo você vai criar um novo aplicativo, dar um nome, escolher a região (no meu caso, estou no Brasil) e aceitar os termos.

Gif criando aplicativo no firebase console

Antes de dar continuidade no Firebase, não esqueça de adicionar sua plataforma Android no seu app Ionic com o comando abaixo:

ionic cordova platform add android

Agora, voltando ao Firebase:

Seremos levados ao painel de controle do Firebase. Começaremos adicionando a plataforma Android. Você precisa colocar um nome de pacote (é opcional adicionar um apelido).

Para que você possa utilizar algumas APIs da Google é necessário gerar um certificado SHA-1 ( se quiser mais detalhes, acesse este link), Então, para adicionar seu certificado de assinatura você precisa entrar no terminal e usar o seguinte comando:

keytool -list -v -keystore "C:\Users\Silvana Lima\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Lembre-se de passar o nome do seu usuário. Neste exemplo estou usando o meu.

Depois de colar a SHA1 e registrar seu aplicativo, faça o download do google-services.json que contém a configuração do seu aplicativo.

Você terá de colar o arquivo google-services.json no seguinte caminho:

\platforms\android\app

É necessário conferir se no seu config.xml consta o mesmo id que você colocou na criação do aplicativo no Firebase. Caso não esteja, siga os passos abaixo e altere.

Agora precisamos adicionar o SDK do Firebase em nosso Aplicativo Ionic.

Para isso precisamos seguir os seguintes passos:

Depois disso acesse o Android Studio para que sincronizarmos. É importante que quando você abrir seu projeto no Android Studio, que você abra ele diretamente no nível \platforms\android para que ele consiga identificar.

Agora vamos gerar a apk e abrir no dispositivo, usando esse comando:

ionic cordova run android --device

Depois de executar seu aplicativo volte no Firebase console e verifique se foi adicionado o SDK do Firebase.

Pronto, Firebase adicionado ao seu aplicativo Ionic!

Este exemplo está disponível no meu Git. Fique à vontade para clonar!