Приключения с Wix Velo

Запрос коллекции местоположений и вычисление средней точки — несколько маркеров на Картах Google с помощью Wix Velo

Добро пожаловать в мою серию статей об отображении нескольких местоположений на Картах Google с помощью Wix Velo. Я взволнован и благодарен, что вы решили изучить то, что я узнал, и я надеюсь, что вы найдете это руководство полезным.

Мы находимся на нашем втором эпизоде ​​нашей серии из пяти частей, и я надеюсь, что вы найдете его ценным!

Наша цель для серии

Наша цель в этой серии статей — создать веб-сайт, который полностью интегрирует отображение нескольких точек данных динамической карты в отображение Карты Google. Мы хотим иметь возможность обновлять местоположение и почти сразу отображать его на нашем веб-сайте. Если вы хотите узнать больше о том, почему это важно, вот мое введение.

Рабочий пример: пример, который мы будем использовать, показан здесь.

Github / Code Repo: для тех, кто считает это полезным, общедоступный репозиторий github находится здесь.

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

Как всегда, я надеюсь, что этот контент будет полезен. Это значит для меня абсолютный мир, когда вы находите время, чтобы аплодировать эпизоду, подписываться на мои истории или использовать мою реферальную ссылку, чтобы зарегистрироваться на Medium. Это дает мне знать, что мои истории помогают вам ❤️.

Наслаждайтесь и не стесняйтесь писать мне ДМ в твиттере, присоединяйтесь к LinkedIn / Github с мыслями и комментариями 😃

В этом эпизоде

Мы рассмотрим первоначальный запрос и обработку информации о нашем местоположении. Вот ссылка на полный код этого эпизода.

Мы рассмотрим следующее:

  1. Настройка нашего бэкэнд-файла .jsw для хранения наших бэкэнд-функций
  2. Запрос набора данных
  3. Расчет средней точки для наших данных с учетом набора местоположений
  4. Объединение результатов вместе

Давайте начнем!

Настройка бэкэнд-файла

Во всей современной веб-разработке существует различие между фронтенд- и бэкэнд-разработкой. Оба имеют ключевое значение для работы веб-сайтов, и существует целая куча дискуссий о том, какой вклад они вносят в общий пользовательский опыт.

Когда дело доходит до этого проекта, мы будем выполнять как можно большую часть нашей обработки на бэкэнде по следующим причинам:

  1. Пользовательский опыт. Обработка данных обычно требует больших вычислительных ресурсов. Чтобы максимально облегчить нагрузку на наших пользователей (и сэкономить их заряд батареи!), мы хотим перенести как можно больше обработки данных на наш сервер. Ни один из вычислений, которые мы делаем в этом примере, не является сверхинтенсивным, но это просто хорошая практика.
  2. Информационная безопасность. Данные, которые обрабатываются серверной частью, обычно более защищены, чем внешняя обработка. Сосредоточив внимание на серверной части как на нашем средстве обработки и предоставив пользователю только «их» информацию, мы ограничиваем возможности злонамеренного или непреднамеренного раскрытия данных.

Вот как мы это делаем:

  1. В редакторе Wix выберите режим разработки (обычно это верхняя правая часть экрана).
  2. С левой стороны перейдите к настройке «Public & Backend».
  3. Раздел «Backend», нажмите кнопку +
  4. Выберите «Новый веб-модуль».
  5. Создайте файл с именем queryLastTenLocations.jsw

Теперь у вас должен быть настроен ваш бэкэнд-файл. Хорошая работа!

Запрос набора данных

Некоторые примечания о Wix

У Wix есть несколько замечательных функций, которые делают его идеальным для веб-разработки. Вот два, которые имеют отношение к нашему проекту:

  1. На основе node.js Это означает, что почти весь наш код (за исключением HTML-элементов по иронии судьбы) может быть написан на javascript, что действительно сокращает время разработки.
  2. Полнофункциональный набор API для всего стека нашей разработки

Сочетание этих двух элементов действительно поможет нам.

Асинхронные запросы

Wix широко использует асинхронные функции (вот отличный пост, если вы хотите узнать об этом). Они обозначаются ключевыми словами await и async. Как правило, все запросы Wix Data являются асинхронными. Это означает, что если нам нужно выполнить последовательные (иначе называемые синхронными) операции с данными, которые мы запросили, нам нужно дождаться (т. е. await) возврата данных, прежде чем двигаться дальше.

Если вы этого не сделаете, вы закончите с ошибкой в ​​​​строках promise unresolved или обнаружите, что ваш код говорит вам, что это было unable to perform operation on empty array .

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

Коллекция запросов

С этим покрытым, давайте приступим!

  1. Импортируйте библиотеку, которую мы будем использовать для запросов к нашему набору данных import wixData from 'wix-data';
  2. Создайте функцию, которая нам понадобится для запроса набора данных для последних десяти записей. Эта функция будет асинхронной и не экспортируемой (т.е. доступной вне этого файла). У нас не будет параметров, так как мы хотим, чтобы запрос каждый раз выполнял одно и то же. Я назвал функцию async function getLastTenEntries(){}

Используя информацию о вашей коллекции из Эпизода 1, заполните следующие данные:

  1. Запросите коллекцию, фильтруя по убыванию _createdDate, не более 10 записей.
  2. Если количество результатов больше 1 (т. е. коллекция не пуста), преобразуйте имена полей в имена, которые имеют смысл для нашего приложения.
  3. Поймать ошибки, которые происходят
  4. Вернуть результаты

Вот код:

Расчет средней точки

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

  1. Хотим ли мы, чтобы средняя точка находилась на одинаковом расстоянии от всех местоположений? Это может означать много времени в пути для одних людей и меньше для других.
  2. Баланс между потребностью в точности и вычислительными ресурсами.
  3. Учет формы Земли, которая не является идеальной сферой.

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

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

Процесс, который мы проходим, чтобы вычислить его, выглядит следующим образом:

  1. Преобразуйте наши десятичные градусы в радианы
  2. Преобразуйте наши координаты в радианах в декартовы координаты.
  3. Рассчитайте средние координаты из наших декартовых координат
  4. Вернуть наши средние координаты обратно в радианы
  5. Преобразуйте наши координаты в радианах обратно в Decimal Degress.
  6. Вернуть объект с нашими десятичными градусами

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

Вот код для всего этого:

Объединение вместе

Наш последний шаг — объединить наши 10 местоположений вместе с нашей средней точкой в ​​один объект JSON. Нам также нужно будет указать нашу цель, концепция, объясненная далее в эпизоде ​​​​4. Это объект, который мы представим в интерфейсной части сайта.

Нам также необходимо определить цель, на которую нацелены наши данные. Это станет более актуальным в уроке xxx, когда мы начнем заполнять наш HTML-элемент.

Шаги:

  1. Используйте функцию getLastTenEntries(), чтобы запросить набор данных для последних 10 местоположений.
  2. Передайте эти местоположения функции calculateMidpoint(locations), чтобы вычислить их среднюю точку.
  3. Создайте объект для хранения 10 местоположений, средней точки и цели.
  4. Вернуть этот объект

Вот код:

Проведите быстрый тест

Давайте протестируем эту функцию, чтобы убедиться, что она работает.

  1. Нажмите кнопку «Воспроизвести» в редакторе Wix рядом с getLocationData().
  2. Как только появится экран, снова нажмите кнопку воспроизведения и посмотрите на результаты. Вы должны получить объект, который показывает вам «Места», «Среднюю точку» и «Цель».

Обратите внимание на формат данных.

Завершение Эпизода 2

И это завершение Эпизода 2! Мы многое рассмотрели!

В нашем следующем эпизоде ​​мы углубимся в наш HTML-элемент и подготовим его к получению наших местоположений!

Список эпизодов:

Полный список эпизодов этого сериала приведен ниже, чтобы помочь вам быстро сориентироваться ❤

  1. Настройка нашего сайта
  2. Запрос коллекции местоположений и вычисление средней точки
  3. Отображение карты и маркера
  4. HTML-элементы и отправка данных
  5. Автообновление и изменение размера карты