Configurando um aplicativo Ionic com o Firebase

Configurando um aplicativo Ionic com o Firebase

25-07-2018 On Por Sinesio Bittencourt

 

Post em parceria com a Mastertech

Neste post, vou mostrar para você como criar um banco de passo a passo e como  se conectar utilizando seu app  ao banco de dados firebase do . Vamos também disponibilizar o código no GitHub para que você possa testar. Vamos lá?

Mas o que é esse tal de Ionic framework?

Criando e configurando um banco de dados para um aplicativo Ionic com o Firebase

ionic  é um framework para app mobile para desenvolvimento de aplicações híbridas usando Angular, JavaScript, TypeScript e é claro o HTML5. Sua primeira versão 1.0 foi criado no final de 2013 por Ben Sperry e Max Lynch e foi criado sob uma licença MIT.

Na criação do framework, Ben Sperry (CEO) escreveu a seguinte mensagem “É inteiramente, 100% open-source. Sob licença MIT, significa que qualquer um pode usá-lo, com propósito comercial ou pessoal – isso não importa para nós”– fonte: techcrunch.com

Antes de começar,  de fato, a colocar a mão na massa, vou explicar rapidamente o que é o Firebase e o NodeJs. Em ambos teremos que instalar e configurar para que tudo funcione corretamente em nosso app, e para isso temos que entender um pouco de cada um e suas dependências.

O firebase

É uma plataforma do Google para suporte ao desenvolvimento de aplicações, ele conta com diversas funcionalidades  como o escalonamento automático, não importando o tamanho do seu app.

Algumas das  principais funcionalidades são: Analytics, Autenticação, Banco de Dados, Armazenamento de dados, Cloud Functions, Cash Reporting, Notificações, Mensagens, Publicidade. Com integrações como iOS, Android e Web.

Primeiros Passos no firebase

Antes de iniciar o nosso app no ionic, vamos criar uma conta no firebase utilizando a sua própria conta do Google.

Acesse o link e faça o seu cadastro: https://firebase.google.com/

Depois que a conta foi criada, acesse seu console e localize a opção no canto direito no topo de seu navegador, se não conseguir encontrar acesse o seguinte link: https://console.firebase.google.com e crie seu projeto.

Preparando o ambiente

Agora que já criamos o nosso projeto dentro no firebase, vamos deixar ele em standby e vamos instalar o NodeJs. Nesse tutorial vou utilizar o terminal para realizar a instalação, mas você consegue instalar também via o executável do .

Instalando o NodeJs

Acesse o site do NodeJs e baixe o arquivo No Link para download.

Lembre que você deve ter o SDK e o Java instalados para fazer build para Android e o Xcode para o build no iPhone.

Nos site do IONIC temos o passo a passo de como fazer no OSX e no Windows.

Link de instalação para Windows
Link de instalação para Mac

 

aplicativo ionic

Depois que finalizar as configurações acima vamos verificar as versões do IONICNPM e do NODE.

Obs: Se você ainda não tem o IONIC instalado execute o seguinte comando em seu terminal.

npm install -g ionic

Nesse comando estamos especificando que será instalado de forma global o Cordova e o Ionic.

Basta seguir o mesmo procedimento em seu terminal.

Comandos

ionic -v
>> 3.20.0

Sinesio$ npm -v
>> 5.6.0

Sinesio$ node -v
>> v8.11.3

Para evitar erros procure utilizar a mesma versão!

ionic-2

Depois de tudo devidamente configurado, vamos iniciar nosso primeiro projeto em ionic.

1 – Criando meu primeiro APP em IONIC

Vamos primeiro criar uma pasta para o nosso projeto e depois dentro dele criamos nosso app.

Sinesio$ mkdir ionic_and_firebase

Sinesio$ cd ionic_and_firebase

Sinesio$ pwd

../ionic_and_firebase

Depois de criar a nossa pasta e acessar ela vamos criar nosso primeiro aplicativo, tudo vai ser feito via terminal com comando.

ionic-2

Sinesio$ ionic start

What would you like to name your project?: ionic_and_firebase_APP
What starter would you like to use?: blank

Would you like to integrate your new app with Cordova to target native iOS and Android? Yes

ionic-3

Ainda ficou com dúvidas?

Acesse https://ionicframework.com/docs/cli/ (Em ingles)

2 – Testando seu primeiro app no navegador

Depois que criamos o nosso primeiro projeto vamos testar e ver se está tudo funcionando. Acesse seu terminal novamente e digite os seguinte comando.

Sinesio$ cd ionic_and_firebase_APP/

Sinesio$ ionic serve -l

:Para rodar o app você deve sempre verificar se está dentro da pasta.

Depois que o comando executar seu navegador vai abrir automaticamente e vai mostrar uma tela para testar seu app.

ionic-4

Você acaba de criar seu primeiro app em ionic framework! Mas ainda temos muito trabalho pela frente.

3 – Entendendo a estrutura do ionic

Fazendo uma rápida análise nas principais pastas do projeto, podemos destacar algumas:

node_modules: local onde são armazenados os plugins da aplicação que foram instalados pelo npm.

platforms: contém o código fonte de cada plataforma do aplicativo, para cada plataforma existe uma pasta que é criada ao comando do desenvolvedor, quando este deseja fazer o build da aplicação para IOS ou Android.

ionic-5

resources: aqui ficam os arquivos de recursos relacionados a cada plataforma, como ícones do app, ícones de notificação, etc.

src: pasta utilizada mais comumente durante o desenvolvimento. Nela ficam os arquivos de código fonte da aplicação que está sendo implementada.

Ionic.config.json: este arquivo é responsavel pela configuração do Ionic.

Package.json: este arquivo é utilizado para guardar as dependencias.

Ion-header (Cabeçalho)

ion-navbar – barra de navegação (botão back)
ion-title – título da página
ion-buttons (start | end)
button (ion-button, icon-only)

Ion-content (content)

Ion-icon (Icones)

Ionic conta com uma vasta biblioteca de ICONES e sua implementação é muito facil e rapida.

ionic-6

[ad id=’3939′]

ionic-7

Saiba mais no site: https://ionicframework.com/docs/ionicons/

Depois que já sabemos como criar um projeto e a estrutura básica do ionic acredito que já podemos ir para a nossa última parte do nosso post que é a conexão com o banco de dados com o firebase.

4 – Conectando com o firebase do google

Para testar a conexão vamos criar uma página simples de login, onde vamos ter o campo e-mail senha somente. O objetivo é ver como funcionam as configurações do firebase.

Para criar uma pagina vamos novamente no terminal e digitamos o seguinte comando.

Sinesio$ ionic g page login

[OK] Generated a page named login!

Este comando vai gerar a seguinte árvore dentro do nosso projeto.

O comando acima serve para gerar uma página, o g indica gerar, o page indica o que vai ser gerado e o login é o nome da página que vamos gerar.

Vamos utilizar esta página para a autenticação dos usuário do nosso aplicativo.

ionic-8

5 – Configurando nosso banco de dados no Firebase

Acesse novamente seu banco de dados no firebase, no lado esquerdo aperte no botão Authentication (Autenticação). Encontre a aba Sign-in method (Método de logine ative a opção /Password

ionic-9

Depois que realizar o procedimento acima, crie um arquivo com o seguinte nome config.ts dentro da pasta src em seu projeto ionic.

ionic-10

Depois de tudo bem configurado vamos rodar mais um comando no terminal, agora vamos adicionar os serviços do firebase e para tudo rodar direitinho vamos usar a biblioteca do angularfire2.

Rode o comando:

Sinesio$ npm install firebase angularfire2

Fiz uma pagina teste de cadastro e já está inserindo os dados no banco como podem ver na imagem abaixo.

ionic-11

Depois que eu adiciono os dados, ele automaticamente insere na base de dados e gera uma ID para o usuário.

ionic-12

O projeto completo com os  arquivos configurados estão todos em meu GitHub, você só precisa mudar o arquivo config.ts e colocar os dados do seu firebase.  

Dicas!

StackBlitz (teste sem preocupar-se com ambiente)

https://stackblitz.com

Playground: (teste sem preocupar-se com ambiente)

http://play.ionic.io

Ionic Creator: (Wireframes e estrutura de views em minutos)

http://creator.ionic.io

Ainda com as dicas o WooCommerce já tem uma API REST nativa, baixe o WordPress e teste agora mesmo o REST  baixando o plugin no link http://v2.wp-api.org.

Conclusão

IONIC tem evoluído cada dia mais e vem se preparado para as novas tendências. Além de muito fácil de aprender, é moderno e segue as melhores práticas de desenvolvimento da atualidade.

Espero ter ajudado ou pelo menos ter despertado a curiosidade em você para  testar um pouco o Ionic, já que a cada dia que passa o framework ganha espaço no mercado brasileiro.

Se você ainda ficou com alguma dúvida ou teve alguma dificuldade na configuração, deixe um comentário.


Autor:
Sinesio Bittencourt

Mais de 11 anos experiência com Linux e na área de desenvolvimento de sistemas tenho mais ou menos 6 anos de experiência com desenvolvimento em Java, e Python. Atualmente estudando Gestão da Tecnologia de Informação. Focado em  DevOps e nuvens privadas usando OpenStack. Atualmente estou exercendo a função de Technology Evangelist na HostGator.

▸GitHub: https://github.com/sinesiobittencourt

▸Blog: https://blog.sinesio.com.br

[ad id=’3939′]