DEV Community 👩‍💻👨‍💻

Sávio Santos
Sávio Santos

Posted on • Updated on

Localização em tempo real usando Ionic Framework e Google Planilhas

Alt Text

Nesse tutorial criaremos um App básico usando o Ionic Framework, onde o usuário poderá ativar/pausar o envio de sua localização em tempo real usando o *Sheetson.

*Serviço que oferece a integração da API do Google Planilhas de uma forma mais prática e simples.

1. Requisitos

Ferramentas Link
Node.js 12+ instalado https://nodejs.org/
Ionic Framework 4+ instalado https://ionicframework.com/
Login no Sheetson usando conta do Google para obtenção da API https://sheetson.com/

2. Estrutura do Frontend

- Crie um projeto Ionic em branco:

$ ionic start trackingApp blank
Enter fullscreen mode Exit fullscreen mode

Instale as seguintes dependências dentro do projeto:
- Geolocation: para pegar localização do usuário.

$ ionic cordova plugin add cordova-plugin-geolocation
$ npm install @ionic-native/geolocation
Enter fullscreen mode Exit fullscreen mode

- Leaflet map: mapa open-source que utilizaremos para ver a posição do usuário.

$ npm install leaflet --save
$ npm install @types/leaflet
Enter fullscreen mode Exit fullscreen mode

Importações:
- No arquivo src/app/app.module.ts importe as dependências e adicione-as aos providers e imports:

...
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { HttpClientModule } from '@angular/common/http';
...
imports: [..., HttpClientModule, ...],
  providers: [
    Geolocation,
...
Enter fullscreen mode Exit fullscreen mode

- Adicione o link abaixo dentro da tag head do arquivo src/index.html para adicionar arquivos CSS ao mapa:

...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
...
Enter fullscreen mode Exit fullscreen mode

3. Estrutura do Backend

- Acesse o site do Google Drive e crie uma nova planilha:
Alt Text
Renomeie o nome da planilha para trackingApp (ou qualquer nome que deseje);
Renomeie o nome da primera tabela da planilha para Location;
Crie 4 colunas: timestamp (para marcar a data e hora), latitude, longitude (coordenadas do usuário) e tracking (status do rastreamento).


Alt Text
- Vá a parte de compartilhando da planilha, escolha a opção de modo de edição e clique em feito. Após isso, pegue o ID da planilha como na imagem abaixo. Usaremos ele na implementação da API:
Alt Text
- Acesse o site do Sheetson, vá a tela Go to Console e pegue a chave de acesso a API como na imagem abaixo:
Alt Text

4. Implementação

De início iremos criar 2 serviços. Um para a API e outro para criar um alerta customizado.
- Crie os serviços dentro do projeto Ionic rodando os seguintes comandos:

$ ionic g service services/api
$ ionic g service services/alert
Enter fullscreen mode Exit fullscreen mode

- No arquivo src/app/services/api.service.ts adicione a seguinte lógica:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private url: string = "https://api.sheetson.com/v2/sheets";
  private headers: HttpHeaders = new HttpHeaders({
    "X-Spreadsheet-Id": "SHEET ID",
    "Authorization": "Bearer " + "KEY"
  });

  constructor(
    private http: HttpClient
  ) {

  }

  async updateUserLocation(latitude: number, longitude: number, tracking: boolean): Promise<any> {
    let body: any = {
      timestamp: new Date(),
      latitude: latitude,
      longitude: longitude,
      tracking: tracking,
    };
    return this.http.patch(`${this.url}/Location/2`, body, { headers: this.headers }).toPromise();
  }
}
Enter fullscreen mode Exit fullscreen mode

Perceba que utilizamos a chave da API e ID da planilha nos headers da requisição. Usaremos o método patch para mandar a localização para a planilha. Por motivos pelos quais não sei o método post e put estão com problemas, por isso para que todo o resto do tutorial funcione adicione na 2ª linha da planilha quaisquer valores em cada coluna. Só utilizaremos a 2ª linha da tabela.


- No arquivo src/app/services/alert.service.ts adicione a seguinte lógica:

import { Injectable } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class AlertService {

  constructor(
    private alert: AlertController
  ) { }

  async presentCustomAlert(title, message): Promise<any>{
    let alert = await this.alert.create({
      header: title,
      message: message,
      buttons: ["Entendi"]
    });
    alert.present();
  }
}
Enter fullscreen mode Exit fullscreen mode

Utilizaremos o alerta para mostrar majoritariamente as mensagens de erro que ocorrerem.

Lógica do mapa.

- No arquivo src/app/home/home.page.ts adicione a seguinte lógica para criar e mostrar o mapa:

import { Component } from '@angular/core';
import * as Leaflet from 'leaflet';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  map: Leaflet.Map;

  constructor() {
  }

  private createMap(): void {
    this.map = Leaflet.map('mapId').setView([-9.002137, -36.325678], 15);
    Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'App Valmir Motorista',
    }).addTo(this.map);
  }

  ionViewDidEnter(): void {
    this.createMap();
  }

  ionViewDidLeave(): void {
    this.map.remove();
  }
}
Enter fullscreen mode Exit fullscreen mode

- Agora, no arquivo html src/app/home/home.page.html adicione o mapa:

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Tracking App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <div id="mapId" style="margin: auto; width: 90%; height: 60%"></div>
  </ion-content>
</ion-app>
Enter fullscreen mode Exit fullscreen mode

Lógica do rastreamento.

- Importe e defina as seguintes classes no construtor da classe Home em src/app/home/home.page.ts:

...
import { ApiService } from '../services/api.service';
import { AlertService } from '../services/alert.service';
import { Geolocation } from '@ionic-native/geolocation/ngx';
...

...
constructor(
    private geolocation: Geolocation,
    private api: ApiService,
    private alert: AlertService
  ) { }
...
Enter fullscreen mode Exit fullscreen mode

- Defina as variáveis abaixo na classe Home em src/app/home/home.page.ts e crie a seguinte função:

...
marker: any;
subscription: Subscription;
coords: any = [];
...

...
btnUpdateLocation(tracking){
  if (tracking){
    this.subscription = this.geolocation.watchPosition().subscribe(async(response: any)=>{
      this.coords = [response.coords.latitude, response.coords.longitude];
      this.api.updateDriverLocation(this.coords[0], this.coords[1], tracking)
      .then(()=>{
        if (this.marker != null){
          this.map.removeLayer(this.marker);
        }
        this.marker = Leaflet.marker(this.coords)
        .addTo(this.map).bindPopup('Você está aqui.');
        this.map.setView(this.coords, 16);
      }).catch(()=>{
        this.alert.presentCustomAlert("Problema", "Verifique sua conexão com à internet.");
      });
    });
  }else{
    this.subscription.unsubscribe();
    this.api.updateDriverLocation(this.coords[0], this.coords[1], tracking)
    .then(()=>{
      this.alert.presentCustomAlert("Sucesso", "Localização pausada.");
    }).catch(()=>{
      this.alert.presentCustomAlert("Problema", "Verifique sua conexão com à internet.");
    });
  } 
}
...
Enter fullscreen mode Exit fullscreen mode

- Para finalizar, adicione a seguinte tag no arquivo src/app/home/home.page.ts. Usaremos um segment button:

...
<ion-segment>
      <ion-segment-button (click)="btnUpdateLocation(true)">Ativar</ion-segment-button>
      <ion-segment-button (click)="btnUpdateLocation(false)">Pausar</ion-segment-button>
</ion-segment>
...
Enter fullscreen mode Exit fullscreen mode
Fique atento!!!
Adicione quaisquer valores na 2ª linha da planilha no Google Sheets, pois o método patch informará um erro de CORS caso não haja, por ser uma função de atualização de dados.

Teste e veja o resultado final:

Alt Text
Alt Text
Link do repositório: https://github.com/SavioSantos0808/Tracking-App.

Caso tem encontrado algum problema reporte-me por favor. Logo logo, irei publicar a continuação desse tutorial para que ele funcione corretamente em todos os dispositivos no Android e com precisão de localização.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.