huogerac / trot-geo-tracking Goto Github PK

Mapa de navegação inicial par dar uma direção das funcionalidades (MVP) da primeira versão

Página principal ao projeto com o botão Iniciar

• mobile first

Percurso Realizado de Carro aproximadamente 1Km

Positions:
{ "latitude": -28.5048766, "longitude": -49.0152201, "latLongAccuracy": 17.28700065612793, "heading": null, "speed": null, "altitude": 7.099999904632568, "altitudeAccuracy": null, "date": 1675383279444 }

{ "latitude": -28.5048628, "longitude": -49.0152924, "latLongAccuracy": 12.375, "heading": 214.7494354248047, "speed": 0.7011862397193909, "altitude": 7.099999904632568, "altitudeAccuracy": null, "date": 1675383281762 }

{ "latitude": -28.504868, "longitude": -49.0152975, "latLongAccuracy": 15.378999710083008, "heading": 215.2270965576172, "speed": 0.6941099762916565, "altitude": 7.099999904632568, "altitudeAccuracy": null, "date": 1675383284456 }

{ "latitude": -28.5048923, "longitude": -49.0153175, "latLongAccuracy": 88.45099639892578, "heading": 215.55702209472656, "speed": 0.6784408688545227, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383289506 }

{ "latitude": -28.5047722, "longitude": -49.015221, "latLongAccuracy": 33.5880012512207, "heading": 36.07865905761719, "speed": 1.3821338415145874, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383294487 }

{ "latitude": -28.5046196, "longitude": -49.0150907, "latLongAccuracy": 21.03700065612793, "heading": 36.95458984375, "speed": 2.7037129402160645, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383299523 }

{ "latitude": -28.5043346, "longitude": -49.0151384, "latLongAccuracy": 17.256000518798828, "heading": 4.118660926818848, "speed": 4.305296421051025, "altitude": 7.400000095367432, "altitudeAccuracy": null, "date": 1675383304536 }

{ "latitude": -28.5040658, "longitude": -49.0151977, "latLongAccuracy": 18.37299919128418, "heading": 354.3022766113281, "speed": 5.297706127166748, "altitude": 7.700000286102295, "altitudeAccuracy": null, "date": 1675383309555 }

{ "latitude": -28.5035122, "longitude": -49.0153063, "latLongAccuracy": 21.117000579833984, "heading": 351.2693786621094, "speed": 9.188217163085938, "altitude": 8, "altitudeAccuracy": null, "date": 1675383314709 }

{ "latitude": -28.5030106, "longitude": -49.0154799, "latLongAccuracy": 17.30500030517578, "heading": 346.4515686035156, "speed": 10.458812713623047, "altitude": 7.800000190734863, "altitudeAccuracy": null, "date": 1675383319589 }

{ "latitude": -28.5025789, "longitude": -49.0156132, "latLongAccuracy": 22.847999572753906, "heading": 345.5543518066406, "speed": 10.223182678222656, "altitude": 7.599999904632568, "altitudeAccuracy": null, "date": 1675383324570 }

{ "latitude": -28.5021325, "longitude": -49.0158147, "latLongAccuracy": 14.86400032043457, "heading": 341.8976135253906, "speed": 10.365555763244629, "altitude": 7.599999904632568, "altitudeAccuracy": null, "date": 1675383329597 }

{ "latitude": -28.5015516, "longitude": -49.0160538, "latLongAccuracy": 24.79400062561035, "heading": 340.7234802246094, "speed": 12.306815147399902, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383334617 }

{ "latitude": -28.5005599, "longitude": -49.0162956, "latLongAccuracy": 19.75200080871582, "heading": 346.1756591796875, "speed": 6.182343482971191, "altitude": 7.599999904632568, "altitudeAccuracy": null, "date": 1675383344677 }

{ "latitude": -28.5001035, "longitude": -49.0165173, "latLongAccuracy": 23.441999435424805, "heading": 338.92694091796875, "speed": 7.702083110809326, "altitude": 7.599999904632568, "altitudeAccuracy": null, "date": 1675383351321 }

{ "latitude": -28.4997849, "longitude": -49.0166592, "latLongAccuracy": 20.072999954223633, "heading": 338.7668151855469, "speed": 7.622072219848633, "altitude": 7.599999904632568, "altitudeAccuracy": null, "date": 1675383356353 }

{ "latitude": -28.4994264, "longitude": -49.0167492, "latLongAccuracy": 21.827999114990234, "heading": 343.64398193359375, "speed": 7.881384372711182, "altitude": 7.599999904632568, "altitudeAccuracy": null, "date": 1675383361369 }

{ "latitude": -28.4992569, "longitude": -49.0166357, "latLongAccuracy": 15.895000457763672, "heading": 1.1828718185424805, "speed": 5.527798652648926, "altitude": 7.5, "altitudeAccuracy": null, "date": 1675383366428 }

{ "latitude": -28.4990206, "longitude": -49.0164992, "latLongAccuracy": 63.930999755859375, "heading": 16.62972068786621, "speed": 5.5891923904418945, "altitude": 6.800000190734863, "altitudeAccuracy": null, "date": 1675383371443 }

{ "latitude": -28.4989595, "longitude": -49.0160334, "latLongAccuracy": 36.492000579833984, "heading": 54.879451751708984, "speed": 6.104126930236816, "altitude": 6.900000095367432, "altitudeAccuracy": null, "date": 1675383376454 }

{ "latitude": -28.4994854, "longitude": -49.0155277, "latLongAccuracy": 28.344999313354492, "heading": 111.88687896728516, "speed": 7.577314376831055, "altitude": 6.5, "altitudeAccuracy": null, "date": 1675383381473 }

{ "latitude": -28.5001124, "longitude": -49.0154166, "latLongAccuracy": 13.838000297546387, "heading": 152.37313842773438, "speed": 9.663863182067871, "altitude": 7.099999904632568, "altitudeAccuracy": null, "date": 1675383386500 }

{ "latitude": -28.5005806, "longitude": -49.0153042, "latLongAccuracy": 30.93899917602539, "heading": 162.54888916015625, "speed": 10.170870780944824, "altitude": 7, "altitudeAccuracy": null, "date": 1675383391501 }

{ "latitude": -28.5012474, "longitude": -49.0151343, "latLongAccuracy": 19.520000457763672, "heading": 165.46595764160156, "speed": 12.656943321228027, "altitude": 7.400000095367432, "altitudeAccuracy": null, "date": 1675383396524 }

{ "latitude": -28.5015853, "longitude": -49.0150984, "latLongAccuracy": 104.0999984741211, "heading": 169.14871215820312, "speed": 9.90869426727295, "altitude": 7.800000190734863, "altitudeAccuracy": null, "date": 1675383401544 }

{ "latitude": -28.5023975, "longitude": -49.0148592, "latLongAccuracy": 17.785999298095703, "heading": 167.0287628173828, "speed": 13.587878227233887, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383406549 }

{ "latitude": -28.5030785, "longitude": -49.0147923, "latLongAccuracy": 20.513999938964844, "heading": 171.61143493652344, "speed": 14.405874252319336, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383411592 }

{ "latitude": -28.5036833, "longitude": -49.0146706, "latLongAccuracy": 44.090999603271484, "heading": 170.73855590820312, "speed": 13.925540924072266, "altitude": 6.300000190734863, "altitudeAccuracy": null, "date": 1675383416619 }

{ "latitude": -28.5042027, "longitude": -49.0145079, "latLongAccuracy": 23.948999404907227, "heading": 168.20094299316406, "speed": 12.905338287353516, "altitude": 6.099999904632568, "altitudeAccuracy": null, "date": 1675383421610 }

{ "latitude": -28.5047464, "longitude": -49.0146246, "latLongAccuracy": 28.23200035095215, "heading": 178.78024291992188, "speed": 12.262043952941895, "altitude": 6.900000095367432, "altitudeAccuracy": null, "date": 1675383426606 }

{ "latitude": -28.5048899, "longitude": -49.0147559, "latLongAccuracy": 25.913999557495117, "heading": 187.70266723632812, "speed": 8.159247398376465, "altitude": 7, "altitudeAccuracy": null, "date": 1675383431628 }

{ "latitude": -28.5047234, "longitude": -49.0150293, "latLongAccuracy": 16.886999130249023, "heading": 235.92042541503906, "speed": 3.8811511993408203, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383436690 }

{ "latitude": -28.5047176, "longitude": -49.0150474, "latLongAccuracy": 22.33300018310547, "heading": 241.48046875, "speed": 1.8092138767242432, "altitude": 7.200000286102295, "altitudeAccuracy": null, "date": 1675383441656 }

{ "latitude": -28.504754, "longitude": -49.0151294, "latLongAccuracy": 87.5999984741211, "heading": 242.3323516845703, "speed": 1.7882541418075562, "altitude": 7.099999904632568, "altitudeAccuracy": null, "date": 1675383446678 }

• latitude
• longitude
• accurace

Criar um .github/workflows/app-node.yml para

• fazer checkout do projeto
• npm install para instalar as dependencias
• npm run lint para garantir que todo código está dentro do padrão

Vídeo com mais detalhes desta tarefa:
https://youtu.be/3DMrDGRYOdY

Tarefa:

• Criar uma estrutura básica de projeto Vue 3 + Vite,
• Usar os componentes do Vuetify 3, assim focamos nas regras de negócio e não em ficar fazendo CSS (depois da fase 2 ou 3 podemos focar em deixar o app bonitão.
• Utilizar node 16 (criar arquivo .nvmrc)

Adicionar testes para validar as regras do projeto.

Problema

Sem teste é difícil saber se um determinada implementação está ou não funcionando corretamente, temos que fazer deploy e testar manualmente diversas coisas para só então saber se algo funciona.

Solução

Adicionar testes e implementar funcionalidades guiada por testes.

Precisamos pesquisar e descobrir uma biblioteca interessante para exibir os dados das posições salvas de um percurso.

Alguns links:

• https://developers.google.com/earth-engine/datasets
• https://earthengine.google.com/
• https://geemap.org/
• https://deck.gl/
• https://leafletjs.com/
• https://www.mapbox.com/industries/outdoors
• https://www.openstreetmap.org/copyright

Precisamos conseguir acessar o GPS do dispositivo através de uma página WEB de forma a obter a posição atual

Vantagens

• Não precisa de internet

Problema:

Salvamos um percurso, fica tudo salvo na página no fone. Mas após algum tempo, talvez 30min ou 1h ou quando navegamos para outra página, ao voltar para o trot, a página é recarregada e perdemos o percurso...

Solução:

O ideial é ter o backend para salvar os percursos, assim cada percurso tem um ID e tudo será salvo e poderá ser recarregado.
Mas enquanto não temos o backend, podemos talvez utilizar o localstorage para manter sempre o último percurso salvo, mesmo que recarregue a página poderiamos carregar sempre o último percurso salvo.

Inicialmente precisamos de um simulador de backend para o endpoint de salvar posição.

Vídeo com mais detalhes da tarefa:
https://youtu.be/nAEkatt9NK0

• Utilizar ESLint + Prettier
• Adicionar comando lint e format

Hugo, poderia criar um novo repositório para começarmos a trabalhar na base do backend?

Problema:

Quando estamos em um percurso, após algum tempo a tela apaga (temos que testar se os pontos continuam sendo salvo ou não), dai temos que ficar colocando o dedo na tela para não apagar.

Solução

Talvez está no momento de brincar um pouco com PWA para acessar recursos do dispositivo onde teremos acesso a mais recursos do fone, como nao desligar a tela o manter o GPS ligado mesmo que a tela apague...

• Passo 1: Colocar pwa usando vue3 + vit
• Passo 2: Testar que deploy do app web atualiza quem criou link do app no fone (problema que resolve no vue 2)
• Passo 3: Achar forma que o watchPositon funcione mesmo quando a tela desliga, ou o usuário muda de app (pwa acessando background services)

Ver as issues #8 e #27 e ver o que podemos melhorar na acurácia de forma que a visualização fique melhor

Vídeo com mais detalhes desta issue:
https://youtu.be/s4MwmoZRg0A

Problema 1 - Pontos fora do trajeto

Alguns pontos do watchPosition está bem fora do percurso real, desta forma a linha desenha não faz sentido e está geralmente em um caminho impossível de fazer (passando por cima de casas e prédios)

Ideias para melhorar o problema

• Tentar configurar (tem um options) a inicialização do geolocation.watchPosition de forma que os pontos sejam melhores
• Entender o atributo accuracy que vem junto com o lat, lon da posição e se a acurácia for muito ruim, talvez é melhor descartar o ponto do que manter ele na lista

Informações relevantes

• Este problema pode variar conforme o modelo de fone ou SO (android novo/antigo ou ios)
• Tudo indica que este problema não está relacionado com a carga da bateria
• Tudo indica que independente se o trajeto foi feito de a pé, bike ou carro o problema continua, talvez a pé tem mais ocorrências

Problema 2 - Depois de algum tempo não conseguimos ver o último ponto

Tudo indica que dado que estamos usando um center fixo utilizando o primeiro ponto obtido, desta forma após percorrer alguns metros, os novos pontos estão fora do centro e não são exibidos, ou seja, estão no mapa mas fora do campo de visão dado o center.
Talvez alterar para usar o center como o último ponto ao invés do primeiro possa mudar este problema

A ideia inicial é utilizar:

FRONTEND:
Vue3 + Vite com Node JS 16
Vuetify para a gente nao ficar brigando com CSS (Sei que gostamos de frontend, mas neste projeto a ideia é focar no negócio)
Provavelmente PWA para conseguir acessar recursos como GPS do dispositivo móvel

BACKEND:
Python + Django com boas práticas, com testes e vamos precisar acessar um banco georreferenciado

Alguem tem uma sugestao diferente disto? o que acham destas escolhas?

Fazer deploy do APP inicial