По мере того, как рост мобильных устройств и устройств Интернета вещей продолжает стремительно расти, Карты становятся заметным интерфейсом для отображения данных с географическими тегами. И все же, когда дело доходит до шаблонов пользовательского интерфейса для создания удобных карт, мы только поверхностно относимся к ним.

В этом сообщении блога мы рассказываем историю о том, как мы создали приложение для обнаружения проверок в реальном времени под названием Now с помощью Google Maps, Angular и appbase.io. Now берет пример с Foursquare и создает систему поиска отметок в реальном времени, ориентированную на карты.

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

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

Как только вы начинаете увеличивать карту, она автоматически начинает показывать отметки в зависимости от текущей области масштабирования.

А когда вы выполняете «Поиск города» для изучения района города, Сейчас показывает список местных отметок в городе в виде списка категорий, доступных для выбора. Это отличный способ найти места, которые другие посещают поблизости, без фильтра рекомендаций AI.

Рецепт

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

  • Как следует из названия, мы используем appbase.io для наших нужд хранилища данных в реальном времени (см. Некоторые другие места, где он использовался - meetupblast, приложения для социальных сетей). Основываясь на Elasticsearch, appbase.io предлагает готовые возможности поиска и автозаполнения, которые пригодятся при создании набора функций Now.
  • Для создания интерфейса карт мы изучили несколько вариантов и остановились на Google Maps. Карты Google имеют самый элегантный и простой в использовании API. А поскольку их директивы Angular можно было использовать бесплатно без ограничений API, решение было очевидным. LeafletJS был на втором месте, особенно с его философией открытого исходного кода и разнообразными темами дизайна.
  • Мы будем использовать Angular для нашего пользовательского интерфейса, поскольку он предлагает одну из лучших интеграций с Google Maps.

Архитектура

Теперь, когда мы понимаем, что такое Now и как оно работает, давайте углубимся в детали.

Backend Worker

Worker - это скрипт NodeJS, который вечно работает на капле DigitalOcean. Рабочий использует Twitter Streaming API для поиска новых проверок Foursquare (Foursquare рекомендует этот подход для получения данных о проверках в реальном времени).

/* Fetching tweets like the above via Twitter’s streaming API */
T.stream('statuses/filter', {track:'swarmapp', language:'en'});

Twitter API возвращает только checkin_id, который рабочий скрипт затем передает в конечную точку проверки Foursquare для получения объекта JSON проверки.

Наконец, рабочий сценарий индексирует объект в URL-адресе приложения appbase.io.

Модель данных

В этом разделе мы рассмотрим модель хранения данных и конкретные сопоставления для следующих сценариев.

  1. Обнаружение новых проверок: запросы в реальном времени в appbase.io работают с одним типом (тип в appbase.io эквивалентен таблице в SQL). Это означает, что мы будем хранить все отметки в одном типе.
  2. Поиск отметок в области масштабирования: Appbase.io поддерживает запросы геолокации в форме - Учитывая центр [широта, долгота], найти все точки данных в окружающем радиусе X миль. Для этого тип данных координат [широта, долгота] должен быть geo_point. Мы создали явное сопоставление geo_point для поля location (L14–17 выше), поскольку оно не может быть автоматически определено из JSON.
  3. Поиск отметок по городу: Appbase.io поддерживает запросы с предложениями для автозаполнения текстового поля. Для этого мы создаем специальное сопоставление для поля city_suggest (дубликат для города) типа завершение. Создание структуры данных завершения требует больших затрат, обеспечивает хранение в памяти и использует FST для выполнения предложения. Короче говоря, это невероятно быстрое автозаполнение.

Интерфейс

Frontend UI - это приложение на Angular, которое запрашивает appbase.io для проверки в реальном времени и исторических данных. Структура каталогов приложения выглядит следующим образом:

src/
|_ _assets/js/
|            |_ _index.js
|            |_ _dataController.js
|            |_ _helperFactory.js
|_ _index.html

index.js
Это точка входа для базы кода, где мы интегрируем представление пользовательского интерфейса с поисковыми запросами Google Maps и appbase.io.

dataController.js
Фактически, все запросы appbase.io выполняются в этом файле. Здесь мы подписываемся на поток новых отметок, запускаем предложения автозаполнения для названий городов, которые пользователь вводит в поле ввода города, и находим отметки в непосредственной близости от области масштабирования пользователя.

helperFactory.js
Как следует из названия, у него есть вспомогательные методы для получения релевантной информации о проверке и координат центра карты в зависимости от различных уровней масштабирования.

Изучение запросов данных

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

Географическое построение

Ранее мы указали тип сопоставления завершения для поля city_suggest. Здесь мы рассмотрим фактический запрос автозаполнения.

Запрос search () вызывается каждый раз, когда изменяется поле ввода «Поиск города».

Фильтр географического расстояния

Аналогичным образом мы создали тип geo_point для поля местоположения. Мы применяем следующий запрос, когда пользователь изменяет фокус масштабирования и область карты, чтобы найти отметки в пределах 2000 км (хорошее эвристическое значение) от координат фокуса.

Проверки в реальном времени

Наконец, давайте посмотрим, как выглядит запрос проверок в реальном времени. В разделе «Модель данных» мы убедились, что все чекины хранились в типе «город», а в приведенном ниже запросе мы применяем фильтр документов match_all для потоковой передачи новых чеков по мере их индексации бэкэнд-воркер.

Уведомление в реальном времени

При создании опыта проверки в реальном времени мы обнаружили несколько случаев, когда новые проверки не обрабатывались, например приложение достигает ограничений FourSquare API (5000 в час), проверки потоковой передачи Twitter с разной частотой.

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

Резюме

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

Сначала мы рассмотрели различные элементы архитектуры, а затем подробно остановились на том, как бэкэнд и компоненты пользовательского интерфейса работают вместе. Без лишних слов, вот важные ссылки: Now worker, Now UI и Now demo link.

Спасибо риши шаху, ФАРХАНУ ЧАУХАНУ, Парт Триведи за то, что они прочитали черновики этого документа и внесли свой вклад в базу кода!