8) Seus Dados e Geocerca

Resposta esperada da API

{
  "success": true,
  "msg": "Dados do cliente carregados com sucesso.",
  "data": {
    "device": {
      "device_id": 8,
      "device_name": "Tablet do Trator",
      "account_type": "produtor"
    },
    "cliente": {
      "id_cliente": 123,
      "razao_social": "FAZENDA MODELO",
      "cidade": "Bebedouro",
      "uf": "SP",
      "segmento": "Citros",
      "variedade_planta": "Pera Rio",
      "porta_enxerto": "Cravo",
      "idade_pomar": "8 anos",
      "qtde_planta": "2500",
      "capacidade_tanque": "2000",
      "qtde_tanque_aplic": "2",
      "qtde_planta_tanque": "1250",
      "area_irrigada": "Sim",
      "plano_manejo": "Convencional"
    },
    "g10": {
      "id_g10": 10,
      "id_fase": 3,
      "fase": "Andamento",
      "status": 0
    },
    "geocercas": [
      {
        "id_geocerca": 5,
        "descricao": "Área destinada para aplicação",
        "total_pontos": 4,
        "centro": {
          "latitude": -21.853900,
          "longitude": -47.479800
        },
        "poligono": [
          {
            "latitude": -21.853901,
            "longitude": -47.479801,
            "ordem": 1
          },
          {
            "latitude": -21.853950,
            "longitude": -47.479700,
            "ordem": 2
          },
          {
            "latitude": -21.854020,
            "longitude": -47.479750,
            "ordem": 3
          },
          {
            "latitude": -21.854000,
            "longitude": -47.479850,
            "ordem": 4
          }
        ],
        "criado_em": "2026-04-24 10:00:00",
        "atualizado_em": "2026-04-24 11:30:00"
      }
    ]
  }
}

Exibição da geocerca no React Native

Em React Native, o app normalmente deve usar um componente de mapa nativo, como react-native-maps. O app deve transformar o array poligono em coordenadas e passar para o componente Polygon.

Instalação recomendada

npm install react-native-maps

Tipos TypeScript sugeridos

type DeviceData = {
  device_id: number;
  device_name: string;
  account_type: 'produtor' | 'produtor_funcionario' | 'colaborador';
};

type ClienteData = {
  id_cliente: number;
  razao_social: string;
  cidade: string;
  uf: string;
  segmento: string;
  variedade_planta: string;
  porta_enxerto: string;
  idade_pomar: string;
  qtde_planta: string;
  capacidade_tanque: string;
  qtde_tanque_aplic: string;
  qtde_planta_tanque: string;
  area_irrigada: string;
  plano_manejo: string;
};

type G10Data = {
  id_g10: number;
  id_fase: number;
  fase: string;
  status: number;
};

type GeoPoint = {
  latitude: number;
  longitude: number;
  ordem: number;
};

type GeocercaData = {
  id_geocerca: number;
  descricao: string;
  total_pontos: number;
  centro: {
    latitude: number;
    longitude: number;
  } | null;
  poligono: GeoPoint[];
  criado_em: string;
  atualizado_em: string;
};

type MeusDadosGeocercaResponse = {
  success: boolean;
  msg: string;
  data: {
    device: DeviceData;
    cliente: ClienteData;
    g10: G10Data;
    geocercas: GeocercaData[];
  };
};

Exemplo de consumo da API

type ApiConfig = {
  appKey: string;
  deviceToken: string;
};

export async function buscarMeusDadosGeocerca(config: ApiConfig) {
  const body = new URLSearchParams();
  body.append('action', 'apiG10');
  body.append('f', 'meus_dados_geocerca');

  const response = await fetch('https://agroecologia.grupoekos.com.br/router/action.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'X-APP-KEY': config.appKey,
      'X-DEVICE-TOKEN': config.deviceToken,
    },
    body: body.toString(),
  });

  const json = await response.json() as MeusDadosGeocercaResponse;

  if (!response.ok || !json.success) {
    throw new Error(json.msg || 'Erro ao buscar dados/geocerca.');
  }

  return json.data;
}

Exemplo de componente React Native

import React from 'react';
import { View, Text } from 'react-native';
import MapView, { Polygon, PROVIDER_GOOGLE } from 'react-native-maps';

type GeoPoint = {
  latitude: number;
  longitude: number;
  ordem: number;
};

type GeocercaData = {
  id_geocerca: number;
  descricao: string;
  total_pontos: number;
  centro: {
    latitude: number;
    longitude: number;
  } | null;
  poligono: GeoPoint[];
};

type Props = {
  geocerca: GeocercaData;
};

export function MapaGeocerca({ geocerca }: Props) {
  if (!geocerca || !geocerca.centro || geocerca.poligono.length < 3) {
    return (
      <View>
        <Text>Área de aplicação ainda não cadastrada.</Text>
      </View>
    );
  }

  const coordinates = [...geocerca.poligono]
    .sort((a, b) => a.ordem - b.ordem)
    .map((p) => ({
      latitude: Number(p.latitude),
      longitude: Number(p.longitude),
    }));

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      mapType="satellite"
      style={{ width: '100%', height: 320 }}
      initialRegion={{
        latitude: geocerca.centro.latitude,
        longitude: geocerca.centro.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }}
    >
      <Polygon
        coordinates={coordinates}
        strokeColor="red"
        fillColor="rgba(255, 255, 0, 0.35)"
        strokeWidth={2}
      />
    </MapView>
  );
}