Советы по вычислению пройденного расстояния в веб-приложении - PullRequest
Новая
       17

Советы по вычислению пройденного расстояния в веб-приложении

0 голосов
/ 29 августа 2018

В настоящее время я создаю веб-приложение (в Polymer с использованием Mapbox), где пользователи могут видеть избранные маршруты на карте и проходить по ним. Они спросили меня, можно ли добавить кнопку (старт / стоп) для записи их активности и подсчета пройденных километров. Я бы построил это так, чтобы сохранить каждое новое геопункт в событии изменения местоположения (navigator.geolocation.watchPosition) и вычислить расстояние между всеми точками и суммировать их.

Теперь реальная проблема

Вероятно, будут пользователи, которые забудут снова нажать кнопку остановки. Если это произойдет, приложение продолжит отправку данных на мой сервер. Это приведет к тому, что ненужные данные будут отправлены в базу данных.

Теперь я попытался найти решение для этого:

Вариант № 1

Я наткнулся на возможность проверить активную вкладку в браузере, используя API видимости страницы . Таким образом, я мог автоматически остановить / начать отслеживать. 

if (!document.hidden) {
    // resume tracking
} else {
    // stop tracking
}

Однако обычно пользователи моего приложения блокируют свои экраны, которые также останавливают отслеживание, потому что visibilityState будет hidden.

Вариант № 2 Мой клиент пришел с решением для автоматической остановки таймера через x часов. Тем не менее, это не звучит интуитивно, потому что это все равно приведет к странной сумме километров.

Опция № 3 Автоматически останавливать отслеживание пройденного расстояния, если вы находитесь на расстоянии более чем х метров от выбранного маршрута. Однако это потребует некоторых вычислений.

Опция № 4 Отслеживайте все действия пользователя. Например. защемление, нажатие, увеличение и т. д. на карте и прекращение отслеживания через 30 минут бездействия

Как мне разработать это приложение, чтобы убедиться, что отслеживание имеет смысл?

1 Ответ

0 голосов
/ 26 сентября 2018

Для людей, которые сталкиваются с той же проблемой, что и я, здесь есть обходной путь, который я придумал.

Я использовал NoSleep.js для воспроизведения видео в фоновом режиме, чтобы убедиться, что мобильный телефон не переходит в режим полного сна. Обязательно добавляйте NoSleep только в том случае, если пользователь взаимодействует с вашим приложением, в противном случае он разряжает только батарею. 

var noSleep = new NoSleep();
document.addEventListener('click', enableNoSleep, false);

function enableNoSleep() {
  noSleep.enable();
  document.removeEventListener('click', enableNoSleep, false);
}

А также обязательно отключите его, используя noSleep.disable();

Каждый раз, когда мое приложение (активная вкладка в Chrome с использованием API видимости страницы ) снова становится активным, я опрашиваю текущее местоположение. 

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") this.getCurrentLocation();
});

Местоположение getCurrentLocation() будет выдвигать текущее местоположение в Array, называемом locationHistory.

Я использую Turf.js , чтобы вычислить расстояние между предыдущим местоположением и текущим местоположением в массиве locationHistory. 

let currentLocation = turf.point(lastpoint);
let previousLocation = turf.point(previouspoint);
let distance = turf.distance(previousLocation, currentLocation);

Я возьму расстояние между текущим местоположением и предыдущим местоположением и добавлю его к своему totalDistance.

Если у пользователя есть приложение в кармане, и он возвращается «онлайн» (открывает приложение), он принимает расстояние между текущим местоположением и предыдущим местоположением. Он не очень точный (потому что он будет проходить только по прямым линиям между двумя точками (но я провел несколько тестов, и это лучшее, что я могу сделать для веб-приложения. Результат будет более точным, если пользователь запретит вход в телефон) заблокированный режим.

Когда вы нажимаете start, я создаю временную метку на сервере ( Firebase Server Timestamp ), чтобы я знал, когда пользователь начинает отслеживать. Я также знаю, что самый длинный маршрут в системе составляет примерно 11 км, что означает, что он должен пройти через 3 часа.

Я запускаю некоторые облачные функции Firebase, чтобы увидеть, отслеживают ли пользователи отслеживание через 3 часа и отключит ли отслеживание на сервере. Когда пользователь открывает приложение через несколько дней, оно перестает отслеживать клиентскую сторону.

Если вы нашли лучшее решение, пожалуйста, дайте мне знать! Мне любопытно; -)

...