Como fazer um APP em 1 dia, com Ionic e Firebase
Continuando a nossa sequência sobre Como fazer um APP em 1 dia, segue agora um tutorial usando as plataformas Ionic 4 e Firebase Hosting.
Ionic é uma ferramenta (um toolkit ou um SDK) especializada para o desenvolvimento de aplicativos móveis (mobile).
Pronto, é só o que você precisa saber sobre teoria. Vamos direto para a prática que tudo fica mais fácil.
Node JS
O Ionic precisa da linguagem Node.js instalada em seu computador para poder funcionar.
OBSERVAÇÃO: Nesse tutorial usaremos linhas de comando (Shell) porque o desenvolvimento de código com o Ionic é feito localmente, em seu computador pessoal.
Então, para instalar o Node faça o download da linguagem em seu computador e siga as diretrizes do próprio site deles:
npm
Junto com o Node você também vai precisar do gerenciador de pacotes npm para instalar o Ionic e outras coisas que serão necessárias aqui nesse tutorial.
Mas não se preocupe em baixá-lo, porque o npm já vem configurado por padrão junto com o Node. Após a instalação do Node, verifique se o npm está configurado corretamente digitando em sua linha de comando shell:
npm --version
OBSERVAÇÃO: Para esses comandos de instalação é necessário que você esteja logado como administrador (root) de seu sistema.
Ionic
Agora sim. O Ionic pode ser baixado e configurado automaticamente através do gerenciador de pacotes npm. Digite em sua linha de comando:
npm install -g ionic
O parâmetro “-g” força a instalação do pacote Ionic no modo global.
Observação: Será instalado o Ionic 4, com o pacote cliente (Ionic CLI) na versão 5.
Meu primeiro App
Prontinho, você está com tudo configurado para já criar seu primeiro app com Ionic!
Simplesmente digite ionic start em sua linha de comando e a mágica acontecerá:
ionic start
A primeira coisa que o Ionic irá solicitar é um nome para seu app. Digite após o prompt “? Project name:”.
A segunda coisa que o Ionic vai pedir é a framework de frontend que irá ser utilizada para a construção de seu app.
Vamos utilizar o Angular nesse tutorial. É só apertar “Enter” nessa opção.
E a última coisa que será solicitada é o template de código que você gostaria de iniciar o seu aplicativo.
O Ionic oferece algumas opções como um template para tabs, outro para menu, outro para ativação da câmera no celular do usuário, e um template completo para você se familiarizar com todas as funcionalidades que o Ionic oferece.
Use as setinhas do teclado para selecionar o template de sua preferência. Para esse tutorial usaremos o template “sidemenu”.
Infelizmente demora um pouquinho para baixar e descompactar toda a estrutura que o Ionic tem que ficar carregando para o seu projeto…
Quando terminar, o diretório criado com o nome do seu projeto conterá os arquivos de código gerados para o seu app. Explore lá:
src
Para ir direto ao ponto, é na pasta “src”, criada pelo Ionic, que se encontram os arquivos de código que você irá customizar para seu app.
Observe o arquivo “index.html” gerado. Ele é o fio da meada principal que inicia todas as chamadas do seu aplicativo.
Observe também a pasta “assets”, onde você coloca as imagens do seu aplicativo.
E finalmente o diretório “app”, em que você começará a armazenar o código das funcionalidades de seu app.
Visual Studio
Está pronto para começar a codar?
Você vai precisar de um editor para programar o seu próprio código. Pode escolher qualquer um de sua preferência.
Neste tutorial utilizaremos o Visual Studio Code, por ser leve, simples, código aberto, bom e gratuito. Se desejar utilizá-lo também, faça o download aqui:
Após baixado e instalado o editor de código de sua preferência, abra nele o seu projeto criado pelo Ionic.
No caso do Visual Studio Code, vá no menu “File” e selecione a opção “Add Folder to Workspace”:
Observação: Para alterar a cor de fundo do Visual Studio, vá no menu “Preferences”, selecione a opção “Color Theme” e escolha então o tema de sua preferência. Claro, escuro, customizado, etc.
HTML
A programação na ferramenta Ionic é baseada nas linguagens de desenvolvimento para a Web como HTML, CSS e JavaScript.
Para entender melhor o que é HTML, CSS, JavaSctipt, Frontend e Backend, clique aqui nesses slides da Evelyn Mendes!
Index.html
Vamos começar a codar de levinho.
Dentro do diretório “src” do código gerado pelo Ionic, encontra-se o arquivo “index.html”. Abra-o no seu editor e explore-o.
Comece alterando o título do aplicativo na tag “<title>”. Coloque o nome do seu app.
Depois altere o parâmetro “href” da imagem do ícone de seu app. E não esqueça também de subir a imagem para o diretório “/assets/icon/”.
Home
Pronto. Agora vamos para o diretório “/src/app”, onde fica o código das páginas de nosso app.
O código HTML, CSS e JavaScript da primeira página do aplicativo encontra-se na pasta “home”, ou na pasta “folder”, ou nas pastas “tab”, ... Dependendo de qual template do Ionic você selecionou.
Abra o arquivo “folder.page.html”, dentro do diretório “/src/app/folder/”, e explore:
Ionic serve
Pronto! Vamos agora dar uma olhada na prática em tudo o que foi gerado automaticamente pelo Ionic, e também nessas primeiras pequenas alteraçõezinhas que fizemos no index.html e na Home do nosso aplicativo.
O comando ionic serve aciona um servidor web local, para o desenvolvimento, que permite o debug e o teste do código do seu app.
Digite o comando na janela shell, dentro da pasta raíz do seu projeto:
ionic serve
Na primeira vez que rodar o ionic serve, será pedido automaticamente para instalar o programa ‘ng’, ou seja, o cliente da linguagem Angular.
Observação: Caso não funcione, tente instalar o cliente do Angular manualmente: npm install -g @angular/cli
ou então execute somente o comando: npm install
Digite ‘Y’ para aceitar a instalação.
E pronto, o Angular CLI será instalado e o servidor Ionic local se iniciará logo após automaticamente:
Se desejar, pode rodar os comandos recomendados na instalação como o
npm audit fix e o npm update.
Quando terminada a inicialização do servidor, uma aba abrirá automaticamente em seu navegador padrão, já com o aplicativo aberto na página Home, através da porta :8100 do localhost criado pelo servidor de desenvolvimento do Ionic.
Observação: Quando desejar sair e finalizar a execução do servidor, é só digitar Control+C duas vezes.
Localhost
😲 !!
Quando abrir automaticamente a aba do navegador, observe a url já gerada pelo Ionic para o seu aplicativo web (WebApp):
http://localhost:8100/folder/Inbox
Observe também os vários componentes gerados automaticamente pelo template “sidemenu” do Ionic, como por exemplo as páginas “Inbox”, “Outbox”, o menu interativo na lateral esquerda do aplicativo, o header e o com o título de cada página e o container principal no meio, etc.
Navegue pelo menu e observe os componentes gerados dentro das páginas do aplicativo, como por exemplo o título da página se alternando dependendo de onde você clica.
E observe também as alterações que realizamos no arquivo “index.html”, como por exemplo o título do aplicativo no topo da aba do navegador, junto com o favicon customizado que substituímos na pasta “/assets/icon/”, lembra?
Tags <ion>
Voltemos ao código.
O Ionic possui suas próprias tags <ion> que substituem as tags HTML que conhecemos.
Para começar a se familiarizar com a sintaxe, adicione uma tag “<ion-img>” na primeira linha de conteúdo da página.
Adicione, por exemplo, a logo do seu aplicativo na primeira tela do app:
<ion-img src=’assets/icon/logoapp.png’></ion-img>
ATENÇÃO: Não esqueça de inserir o arquivo da imagem que você referenciou no código html, no diretório “/assets/”.
SCSS
Sass Cascade Style Sheets (Saas/Scss) é uma linguagem estendida do CSS que adiciona, por exemplo, variáveis e loops às classes do CSS tradicional.
Vamos configurar um estilo para a imagem da logo que adicionamos à nossa página. Abra o arquivo “folder.page.scss”, no mesmo diretório “/src/app/folder”.
Adicione ao código uma classe de estilo para a tag ion-img, que fixa a altura da imagem dessa tag (parâmetro “height”), como no exemplo da figura abaixo:
ion-img {
height: 200px;
}
Inspecionando o código
Para explorar melhor o que o Ionic está aprontando com o nosso código, selecione o modo de Inspeção de seu navegador (por exemplo, Control+Shift+I quando estiver rodando um site no Google Chrome).
Você verá as tags <ion> geradas na aba “Elements” da ferramenta de inspeção.
Expanda as linhas de código da aba “Elements” até a tag <ion-img> que criamos para a logo do app, e você verá na lateral direita do inspetor, na aba “Styles”, a classe de estilo que adicionamos ao arquivo SCSS da página.
Dúvidas e Feedback
E aí! Tá curtindo o tutorial até agora?
Entre em nosso grupo do Telegram, tire suas dúvidas e deixe seu feedback!
@APPem1dia
Criando uma nova página
Agora vamos voltar para a janela de comandos shell e adicionar uma nova página ao nosso app.
O Ionic possui comandos que auxiliam na criação de novas estruturas como páginas e componentes. Digite em sua linha de comando:
Selecione a opção “page” e dê o nome para uma nova página de Cadastro.
Você verá que os arquivos HTML, SCSS e TypeScript foram automaticamente gerados pelo Ionic na nova pasta “/app/cadastro/”.
Ionic link
Agora que já geramos alguns códigos e antes mesmo que nosso projeto comece a crescer muito, é importante nos preocuparmos com a proteção do nosso código e também com o compartilhamento de uma forma eficiente e segura.
Vamos subir os arquivos que já temos até aqui para um repositório de código na nuvem que se chama Github.com, que utiliza a ferramenta Git para armazenar e compartilhar nossos códigos fonte.
ATENÇÃO: O repositório para seu projeto já deve estar criado no GitHub. Veja aqui nesse outro tutorial como criá-lo.
Lá na janela de comandos shell de seu computador, digite o comando abaixo no diretório raiz do seu projeto:
ionic link
Se você ainda não estiver autenticado pelo Ionic, será pedido o seu login. E se você ainda não estiver se cadastrado na plataforma do Ionic, cadastre-se utilizando o comando: ionic signup
O próximo passo é criar um novo app na plataforma do Ionic Appflow. Utilize a setinha para baixo para selecionar. Selecione a opção “Create a new app on Ionic AppFlow” e clique “Enter”. E então digite um nome para seu app e pressione “Enter” novamente.
Na próxima opção escolha a plataforma do Github.
Com o repositório criado, digite “Y” e pressione “Enter”. O Ionic se conectará automaticamente com sua conta do GitHub e sua lista de repositórios aparecerá. Selecione com a setinha para baixo o repositório em que você guardará o código de seu aplicativo.
Agora confirme a opção de conectar com a branch “master” de seu repositório em “Link to master branch only”. Pressione “Enter”:
Prontinho. Seu código Ionic já está conectado com o seu novo repositório no Github.
Commit
Agora vamos comitar os arquivos gerados para o seu repositório no Github.
Para fazer o primeiro commit, continue na pasta raiz de seu projeto. Lá na janela shell, adicione os arquivos desejados para o commit, digitando o comando abaixo:
git add — all
Seus arquivos foram adicionados ao pacote para fazer o commit. Agora digite o comando abaixo:
git commit -m “sua mensagem de commit”
É obrigatório uma mensagem de commit através do parâmetro “-m”.
E finalmente o comando que envia o pacote comitado para o repositório remoto:
git push origin
ou se for a primeira vez, e der erro, digite os comandos:
git remote add origin <url do seu app>
git push — set-upstream origin master — force
Abra então seu repositório na plataforma do GitHub e você verá seu commit lá.
Projeto de exemplo
Para esse tutorial, na verdade já existe um projeto de exemplo feito com todo o código que está sendo usado.
É só acessá-lo no Github.com, copiar e colar, ou clonar os arquivos prontos. Acesse:
https://github.com/allineo/App1DiaIonic
Formulário de Cadastro
Com a nova página criada, vamos voltar para o Visual Studio e adicionar um formulário à página de Cadastro que foi gerada. Mais na frente esse formulário irá ser conectado com um banco de dados.
Abra o arquivo gerado “cadastro.page.html”, no diretório “src/app/cadastro/”, e adicione uma tag HTML <form> dentro da tag <ion-content> dessa página.
Agora vá adicionando os campos para esse formulário, usando tags como por exemplo:
<ion-label>, <ion-input>, <ion-textarea>, <ion-button>, etc…
Para ver como está ficando, inicie novamente o servidor de desenvolvimento do Ionic digitando em sua linha de comando shell:
ionic serve
A página de Cadastro pode ser visualizada digitando o nome da página na URL do navegador:
http://localhost:8100/cadastro
Materialize
O Ionic utiliza nativamente a biblioteca de estilo chamada Materialize. As páginas e os componentes gerados já vêm com esse estilo por padrão.
No entanto você pode trocar o tema inicial ou adicionar mais estilos à vontade no arquivo SCSS gerado junto com sua página HTML.
No caso da nossa página de cadastro, vamos adicionar uma borda inferior aos campos do formulário:
DICA:
Observe que assim que você salva as alterações em seus arquivos de código o servidor de desenvolvimento do Ionic já atualiza automaticamente a sua página na url aberta do localhost lá no seu navegador. Você não precisa reinicializar o servidor web nem nada.
Verifique então o estilo configurado na ferramenta de inspeção do navegador:
Ionicons
A plataforma Ionic possui uma biblioteca de ícones que pode ser explorada pelo site Ionicons.com.
Pesquise o ícone desejado no campo de Search, e clique na imagem do ícone que escolher.
O nome do ícone aparecerá na janela popup no canto inferior do site e também mostrará a tag completa para acessá-lo.
Aí é só copiar essa tag e colar no seu código html do Ionic.
Menu
Para adicionar a nova página no menu lateral gerado automaticamente pelo Ionic, você terá que fazer as alterações direto no código.
O código que contém a lógica de interação do menu está em TypeScript, e se encontra no arquivo “app.components.ts”, localizado na raíz do diretório “app”.
TypeScript
TypeScript é uma extensão da linguagem JavaScript que adiciona tipagem à ela.
Como exemplo do funcionamento do TypeScript, vamos responder uma mensagem de alerta quando o usuário clicar no botão de “Enviar” no formulário de feedback.
Adicione ao arquivo “cadastro.page.ts” a função “sendForm()” abaixo, que definimos no evento de “submit” da tag <form> no arquivo “cadastro.page.html”:
Observe que a classe AlertController teve que ser importada e instanciada no “constructor”. Assim como o componente NgForm teve que ser importado no início do arquivo.
Ao salvar o arquivo .ts, o servidor web atualizará automaticamente e você já poderá ver a caixa de alerta funcionando quando apertar o botão “Enviar” no formulário de feedback.
Build
Pronto. Agora com seu código fonte assegurado, você vai querer ver como está ficando seu app na tela de um celular, não vai?
Para deixar o aplicativo público e acessível remotamente, precisamos subi-lo para um servidor web na cloud.
E para isso, antes precisamos gerar os arquivos PWA (Progressive Web App), de publicação do app, através do comando build.
Na janela shell, digite a linha de comando abaixo na raíz de seu projeto:
ionic build --prod
Quando finalizar o build, verifique que o diretório www de seu projeto foi gerado automaticamente pelo Ionic e seu app estará pronto para subir a um servidor web.
Firebase
O Firebase é uma plataforma para aplicativos web muito simples e eficiente, que oferece, dentre outras coisas, uma hospedagem gratuita para o app que estamos desenvolvendo aqui nesse tutorial.
Vamos começar instalando as bibliotecas necessárias para acessarmos o host do Firebase em nossa máquina local:
npm install -g firebase-tools
E então, fazemos o login no Firebase. Digite o comando abaixo:
firebase login
Faça a autenticação requisitada e aguarde a mensagem de sucesso.
Depois iniciemos o Firebase com o comando:
firebase init
Pressione Y, para confirmar que quer proceder com a inicialização e depois selecione a opção “Hosting”, usando a setinha para baixo e depois apertando a tecla de espaço, para hospedar seu app na plataforma Firebase.
Na próxima opção selecione para criar um novo projeto no Firebase:
Depois dê um nome identificador para o projeto do seu app no Firebase. E confirme o mesmo identificador como o nome do projeto clicando “Enter”.
Quando requisitar o diretório público para o seu projeto, digite www e pressione “Enter”. Usaremos esse diretório que foi gerado no build do Ionic.
E depois digite Y (Sim) para o app de página única:
E então N (Não) para subescrever o arquivo index.html, que foi gerado no build dentro da pasta www:
Firebase Console
Para ver o projeto criado no Firebase, e o aplicativo hospedado na plataforma, entre no console do Firebase:
https://console.firebase.google.com
Selecione o nome do seu app, e então selecione o menu “Hosting”:
Selecione então o botão “Get started”.
Nós já fizemos a instalação do pacote do Firebase, então clique no checkbox “Also show me the steps to add the Firebase JS SDK to my web app” e pule os passos ate lá.
Digite um apelido para seu app e clique no botão “Register and continue”.
O app estará pronto para o deploy.
Deploy
Agora vamos fazer o deploy do seu app no projeto criado na plataforma Firebase. Digite a linha de comando abaixo na raíz de seu projeto:
firebase deploy
😲 !!
Seu app já tem uma url pública!
Corre lá e pega seu celular para visualizar seu primeiro app usando Ionic!
Global.scss
Agora vamos explorar um pouco mais o Ionic.
Quando você cria novas páginas, existem alguns componentes que são genéricos para várias páginas ao mesmo tempo. Se você desejar colocar uma única configuração genérica do CSS que seja acessada por todas as páginas, é só usar o arquivo “global.scss” que fica na raíz do diretório “src” do seu projeto.
Vamos por exemplo colocar um gradiente de fundo para todas as páginas de nosso tutorial aqui:
Inicie o servidor para ver como fica:
Helper Service
Da mesma forma que o global.scss pode ser acessado por todas as páginas, tem alguns métodos em TypeScript que gostaríamos de poder acessar de várias páginas diferentes, tipo métodos utilitários.
Para isso, podemos criar um serviço, chamá-lo de “Helper” e colocar os métodos que quisermos lá. Digite na janela shell:
ionic g service “services/helper”
Após criado o nosso serviço Helper, vamos adicionar nele uma função que recebe os parâmetros passados pela URL do app. Vamos fazer uma função genérica que poderá ser acessada em qualquer página. É só colocá-la dentro do arquivo “services/helper/helper.service.ts”:
Você poderá usar essa função lá nos arquivos .ts de suas páginas, como por exemplo no arquivo “cadastro.page.ts”.
No arquivo .ts de sua página, importe a classe HelperService e passe-a como parâmetro no construtor para inicializá-la. A função genérica estará então disponível para ser acessada:
Observe na execução do servidor do Ionic como fica. Passe um valor no parâmetro email na Url do aplicativo, e depois veja na ferramenta de inspeção do seu navegador, esse mesmo valor sendo exibido na janela do console quando você abre a página de Cadastro:
HttpClient
E agora?! Estão prontos para salvarmos os campos de nosso cadastro num banco de dados?
Como backend para o nosso app, nós vamos usar as APIs que foram criadas em nosso tutorial anterior. Veja aqui como foi feito em “Como fazer um APP em 1 dia”.
Comece adicionando o módulo HttpClient no aplicativo através do arquivo “app.modulo.ts”. Observe as linhas 11 e 20 abaixo para a importação do módulo:
No arquivo .ts da sua página, você vai adicionar então a chamada HTTP para a API de armazenamento dos dados do nosso Cadastro:
Environments
Com Ionic você pode criar automaticamente diferentes ambientes para rodar o seu código. Basta setar as variáveis de configuração desses ambientes separadamente dentro dos arquivos da pasta “environments”.
Abra o arquivo “/environments/environment.ts” e adicione como uma variável a URL da API de backend que iremos utilizar para armazenar os dados de nosso cadastro:
Agora abra o arquivo “/environments/enviroment.prod.ts” e faça a mesma coisa adicionando a URL da API de backend. Assim o cadastro vai funcionar também quando fizermos o build do código usando o comando:
“ionic build --prod”
Form
O form HTML que envia os dados para essa requisição HTTP acima encontra-se no arquivo “cadastro.page.html”:
Aí, é só refazer o “ionic build --prod”, e depois o “firebase deploy” para ver o resultado em produção:
TSLint
Linters, são plugins que você instala em seus editores de código que te ajudam a analisa o código-fonte para sinalizar erros de programação, bugs, erros estilísticos e construções suspeitas.
Para o caso do TypeScript, utilizamos o TSLint. Recomendamos que você o instale em seu editor de código.
Se você usa o Visual Studio Code, esse link te ajuda a instalar a extensão do TSLint para o VS Code:
https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin
Na prática, veja as recomendações de estilo e construção dadas pelo TSLint no código de exemplo abaixo:
Ionic Lab
O Ionic tem uma ferramenta que simula seu deploy em vários dispositivos diferentes, o Ionic Lab.
Para instalá-la, digite:
npm install -g @ionic/lab
Depois de instalá-la, basta iniciar o servidor local do Ionic com o parâmetro do Lab:
ionic serve --lab
Firebase Authentication
A plataforma Firebase possui um completo plugin para autenticação de usuários que tira praticamente todo o trabalho pesado de seu app.
Acesse o console do Firebase, abra seu projeto e clique no botão “+ Add app”:
E selecione então a opção “Web”:
Na próxima tela digite um nome para o seu app e clique no botão “Register app”:
E na próxima tela, você vai precisar copiar o código de configuração do toolkit do Firebase para usar no seu aplicativo Ionic:
Lembra do arquivo “/environments/environment.ts” que guardamos as variáveis dos nossos diferentes ambientes de código? Então, vamos colar esses valores de configuração do Firebase nele:
E não se esqueça de fazer a mesma coisa com o arquivo do ambiente de produção “/environments/environment.prod.ts”:
Métodos de autenticação
O Firebase possui vários métodos de autenticação para você escolher e colocar em seu aplicativo.
Neste tutorial vamos utilizar a opção de e-mail e senha.
Clique no item de menu “Authentication”, do console do Firebase de seu projeto:
Na página de autenticação, selecione a aba “Sign-in method” e habilite a opção “Email/Password”:
Firebase no Ionic
Para utilizarmos o Firebase no Ionic precisamos instalar o módulo necessário com o comando npm.
Digite o comando abaixo na sua janela Shell:
npm install @angular/fire firebase --save
Inicialização do Firebase
Depois de instalado o módulo do Firebase no Ionic é preciso inicializá-lo dentro do arquivo “app.module.ts”.
Importe o módulo “@angular/fire/auth” que você acabou de instalar e depois inicialize o módulo com o comando abaixo:
firebase.initializeApp(environment.firebase);
Authentication Service
Para o código que efetua as chamadas para o plugin de autenticação do Firebase, vamos criar um serviço específico para isso.
Digite o comando abaixo na janela Shell:
ionic generate
E então selecione a opção “service”.
Digite então o nome do serviço “/services/authentication/authentication” e aperte “Enter”:
Os arquivos de serviço serão criados automaticamente na pasta “services”.
Adicione ao arquivo “authentication.service.ts” o código necessário para as chamadas da autenticação do Firebase.
O código de exemplo para essas chamadas encontra-se no arquivo abaixo no GitHub:
https://github.com/allineo/AppBasicaoIonic/tree/master/src/app/services/authentication/authentication.service.ts
Form de autenticação
Vamos adicionar os campos de e-mail e senha na página “home.page.html” do nosso aplicativo para podermos utilizar a autenticação do Firebase:
E então no arquivo “home.page.ts” vamos criar o método que chama a autenticação do Firebase após o clique no botão de “Logar”:
Token
Agora vamos rodar a aplicação para ver a coisa funcionando na prática.
Dê o comando “ionic serve” na sua janela shell e digite seus dados de login:
Abra o inspetor de código de seu navegador para ver o console da página.
Observe que ao logar com sucesso, o Firebase Authentication gera um token de acesso para o usuário corrente, que tem uma validade temporária e garante a segurança nas transações dessa sessão do navegador.
Esse é o token que será passado para o backend e que será o responsável por garantir a autenticidade do usuário nas chamadas das APIs.
Navigation Controller
Uma grande funcionalidade que frameworks como o Ionic possuem é o controlador de navegação entre páginas.
Quando quiser mover entre páginas no Ionic, importe o módulo “NavController”:
import { NavController } from ‘@ionic/angular’;
E use os métodos “navigate” para ir de uma página para outra. Por exemplo:
this.navCtrl.navigateRoot(‘/home’);
EXTRA! Um mapa no seu app
Se tivermos informações de latitude e longitude, ou de CEP ou endereço de qualquer coisa, como por exemplo, pessoas, estabelecimentos, objetos em movimento ou não, etc, podemos plotar essa localização em um mapa e mostrá-lo em nosso app, caso essa funcionalidade seja relevante para o modelo de negócios de nossa ideia.
Por ser o mapa mais utilizado globalmente, como exemplo nesse tutorial, vamos utilizar o plugin de Mapas do Google para plotar as localizações que capturamos dos usuários que acessaram nosso app.
Vamos começar adicionando a Map Javascript API, da biblioteca da Google, ao arquivo “index.html” do seu app no Ionic:
<script src=’https://maps.googleapis.com/maps/api/js?libraries=places&key=SUA-CHAVE-DA-API'></script>
Agora, para realmente mostrar esse mapa na tela do nosso app e demarcar localizações nele, vamos precisar criar uma chave de autenticação na plataforma Google.
Acesse o link abaixo para autorizar o uso da API na plataforma da Google:
https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true
Logue com sua conta no Google e crie um projeto novo na Google Cloud:
Clique no botão “What credentials do I need?” e copie sua API key.
Agora cole essa API key novamente na tag “<script>” do plugin do Google Maps no arquivo “index.html” que acabamos de adicionar acima.
Observação: Se por acaso precisar pegar a Maps API Key posteriormente, clique no link abaixo e busque a “API Key” com a data em que você a criou:
https://console.cloud.google.com/apis/credentials
Vamos agora adicionar uma página ao aplicativo para colocarmos o nosso mapa. Digite “ionic generate” na linha de comando, selecione a opção “page” e dê o nome para a página do mapa.
Instale o plugin do Google maps para o Ionic em sua máquina local. Digite o comando abaixo na sua janela de comandos:
npm install @ionic-native/geolocation
E então configure esse plugin do mapa no Ionic através do arquivo “app.module.ts”. Importe o plugin de “Geolocation” como na figura abaixo:
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
E depois inicialize o plugin dentro dos “providers”.
Adicione agora uma tag para posicionar o componente de mapa no arquivo HTML da página do mapa criada:
<div #map id=”map” style=”height: 90%;”></div>
E então o script que vai inicializar e adicionar o mapa na página HTML. Esse script ficará no arquivo “mapa.page.ts”:
Observe a inicialização do mapa na função “initializeMap()”. A posição corrente do usuário atual, latitude e longitude, é pega através da função “getCurrentPosition()” e inicializado o mapa com essa posição no centro.
Depois para essa mesma posição é criado um “Marker” e plotado no mapa.
Pronto!!
Agora é só testar com “ionic serve”, depois fazer o deploy com “ionic build — prod” e “firebase deploy”:
