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

 

Mas o que é esse tal de Ionic framework?

 

 

O 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 Windows.

 

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 IONIC, NPM e do NODE.

 

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

 

npm install -g ionic cordova

 

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

Basta seguir o mesmo procedimento em seu terminal.

 

Comandos

Sinesio$ 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

 

Dica: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)

 

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

 

ionic-6

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 e 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 login) e ative a opção Email/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

 

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, Php 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. Apaixonado por CAFÉ 😀

 

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

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

 

Criando e configurando um banco de dados para um aplicativo Ionic com o Firebase
4.7 (93.33%) - 3 votos
Você pode também gostar