6) Seus Dados e Geocerca

Resposta esperada da API

{
  "success": true,
  "msg": "Sincronização realizada com sucesso.",
  "data": {
    "server_time": "2026-07-24 08:30:00",
    "device_id": 123,
    "cliente_id": 550,
    "account_type": "produtor",
    "id_franquia": 1,
    "id_franqueado": 10,
    "id_vinculo_produtor": 85,
    "vinculo_atual": {
      "situacao": "ATIVO",
      "data_inicio": "2026-07-01",
      "data_fim": null
    },
    "dados_produtor": {
      "nome": "José da Silva",
      "razao_social": "Sítio Modelo",
      "documento": "000.000.000-00",
      "telefone": "(18) 99999-9999",
      "email": "produtor@exemplo.com",
      "cidade": "Presidente Prudente",
      "uf": "SP"
    },
    "dados_franqueado": {
      "id_franqueado": 10,
      "nome_franqueado": "G10 Bio Presidente Prudente",
      "telefone": "(18) 99999-0000",
      "email": "franqueado@exemplo.com",
      "cidade_base": "Presidente Prudente",
      "uf_base": "SP"
    },
    "geocercas": [
      {
        "id_geocerca": 5,
        "descricao": "Talhão principal",
        "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-07-20 10:00:00",
        "atualizado_em": "2026-07-23 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 sincronizarDadosProdutor(config: ApiConfig) {
  const body = new URLSearchParams();
  body.append('action', 'apiG10bio_produtor');
  body.append('f', 'sincronizacao_offline');
  body.append('app_version', '1.0.0');

  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 sincronizar dados do produtor.');
  }

  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>
  );
}