Хотите сделать собственное бессерверное приложение для поиска ближайшего Старбакса? VueJS и DynamoDB вам помогут!

Кофе-брейк: бессерверное приложение для поиска кофеен Starbucks

Когда вы создаете мобильное приложение или любое программное обеспечение, связанное с определением местоположения, то очень быстро сталкиваетесь с трудной проблемой: как найти что-то “самое ближайшее” или “самое дальнее”.

К счастью существует общедоступное решение этой проблемы – геохешинг (geohashing). Мы будем использовать этот замечательный подход, чтобы создать бессерверное веб-приложения, которое поможет найти все кафе Starbucks в нескольких минутах ходьбы от вас. Также вы можете почитать, как использовать его для геопоиска на бэкенде.

Это бессерверное приложение доступно на GitLab в двух частях – backend-часть и frontend-часть.

Кофе-брейк бессерверное приложение для поиска кофеен Starbucks

Geo для DynamoDB

Геохешинг разделяет мир на ряд вложенных сеток. Каждый символ хэша идентифицирует некоторый квадрат и существенно сокращает пространство поиска. С помощью всего лишь пяти символов мы можем определить пять квадратных километров на поверхности Земли.

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

Но достаточно теории! Все, что вам действительно нужно знать, – алгоритм для решения проблемы существует, и он даже аккуратно упакован в npm-пакет. Библиотека Geo для DynamoDB умеет вычислять хеши, управлять базовой таблицей DynamoDB и поддерживает запросы к списку локаций.

Импорт списка кофеен

Говорят, ответ на любой вопрос уже лежит в каком-нибудь github-репозитории, нужно только его найти. Вот, например, здесь нашелся перечень кофеен Starbucks в США (аж 8 902 штуки, если вам интересно).

Первая задача – импортировать этот список в DynamoDB с помощью библиотеки Geo, но перед этим нужно инициализировать таблицу:

Кофе-брейк бессерверное приложение для поиска кофеен StarbucksФайл local/setup.js в backend-репозитории на GitLab

Этот код определяет длину хеша (5 символов) и имя таблицы, а библиотека делает все остальное. Эта функция выполняется несколько секунд, ожидая, пока не завершится процесс создания.

После этого можно загружать локации в наше бессерверное приложение. Функция loadTable состоит из двух частей. Сначала список из JSON-файла переводится в JSON-структуру, подходящую для библиотеки Geo.

Кофе-брейк бессерверное приложение для поиска кофеен StarbucksФайл local/setup.js в backend-репозитории на GitLab

Теперь библиотека может загрузить данные в DynamoDB пакетами:

Кофе-брейк бессерверное приложение для поиска кофеен StarbucksФайл local/setup.js в backend-репозитории на GitLab

Результаты работы функции можно увидеть в AWS консоли или выполнив следующую команду CLI:

После этого можно протестировать функцию запроса на следующем коде, вызвав в консоли node query :

Кофе-брейк бессерверное приложение для поиска кофеен StarbucksФайл local/query.js в backend-репозитории на GitLab

Она найдет 10 кофеен Starbucks в пределах 1 км от указанной точки:

Кофе-брейк бессерверное приложение для поиска кофеен Starbucks

Серверная часть без сервера

Скачайте репозиторий с бэкенд-сервисом и используйте npm install , чтобы установить необходимые пакеты. Затем из корневой директории выполните команду node index , чтобы запустить Express-сервер локально.

Для удобного тестирования API отлично подходит Postman. Если отправить POST-запрос на http://localhost:3001/ с координатами, указанными ниже, вы получите ответ от Geo:

Кофе-брейк бессерверное приложение для поиска кофеен Starbucks

Код в файле index.js – это только обертка для запроса, который мы протестировали раньше. Он извлекает параметры широты и долготы и возвращает ответ. Сейчас все происходит локально, пора перенести работу в облако и использовать Lambda.

Прежде чем опубликовать свое бессерверное приложение, скопируйте ARN из таблицы DynamoDB, которую вы создали ранее, в файл serverless.yaml в корневой директории. Установленные здесь разрешения слишком широкие, поэтому вы должны вставить ARN в строку 26, тогда функция сможет получить доступ только к этой таблице.

Для деплоя проекта, запустите sls deploy и обратите внимание на endpoint. Если вы повторите тест с Postman, то получите те же самые результаты, но на этот раз функция работает на Lambda.

Кофе-брейк бессерверное приложение для поиска кофеен Starbucks

Фронтенд

Сделайте три шага для настройки клиентской части:

  • Клонируйте GitLab репозиторий и запустите npm install для установки пакетов. Google Maps и вставьте его в main.js (строка 9). Если вы планируете публиковать проект, то для предотвращения кражи квот после деплоя ограничьте ключ только используемым доменным именем.
  • Вставьте API Gateway endpoint в файл App.vue (строка 56).

Мы используем фреймворк Vue для быстрого и простого создания интерактивного пользовательского интерфейса. Весь код находится в файле src/App.vue. Разметка выглядит так:

Кофе-брейк бессерверное приложение для поиска кофеен Starbucks

Пакет Vue Google Maps отрисовывает карты и управляет маркерами. В коде используются три компонента карт Google:

  • Сама карта (GmapMap) с зумом 15 (из 20) и стилем “terrain”. При нажатии запускается метод updateCenter .
  • Маркеры (GmapMarker) – красные пины, отмечающие локации. При изменении массива с кофейнями они будут обновляться.
  • Круг (GmapCircle) – светло-голубой круг радиусом в 1 км с центром в точке, в которой кликнул пользователь. Показывает область текущего поиска.

При клике на карту вызывается метод updateCenter :

Кофе-брейк бессерверное приложение для поиска кофеен Starbucks

Этот код использует библиотеку Axios для вызова API Gateway endpoint и размещения на карте маркеров, отмечающих результаты поиска. При каждом изменении массива пинов Vue обновляет визуальное представление.

Запустить проект локально можно с помощью команды npm run serve , он будет доступен по адресу http://localhost:8080/.

Для создания продакшн-сборки запустите npm run build и дистрибутивы будут собраны в папке dist. Скопируйте их в набор корзин S3 для статического сайта, и бессерверное приложение будет полностью готово к работе.

Время для кофе

Этот туториал был разработан для поиска кофеен Starbucks в радиусе 1 км, но вы можете использовать этот код для других объектов на любом расстоянии. Например, искать ближайшие такси или сделанные в определенном районе фотографии.

DynamoDB поддерживает постоянную производительность под любой нагрузкой и позволяет масштабировать ваш проект, а библиотека Geo позволяет абстрагироваться от сложного управления геохешингом. Вам осталось лишь расслабиться и найти ближайшую кофейню Starbucks, чтобы выпить кофе.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Современный подход к разработке с использованием Next.js