Отправка маршрута проезда с помощью Bing Maps и Twilio MMS

Недавно мои родители купили себе новый блестящий ноутбук. Они принесли его домой, поставили на стол и поняли, что единственный разъем для дисплея на ноутбуке — HDMI. К сожалению, это не подходило к их внешнему монитору, у которого были только порты VGA и DVI. Как местный семейный айтишник, они позвонили мне.

Я мог бы заказать переходник, но решил, что поиск на месте будет быстрее. Я нашел нужную деталь на сайте Best Buy — универсальный кабель HDMI-DVI, который идеально подходил.

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

**Best Buy (BB)**: Здравствуйте, Best Buy, чем могу помочь?

**Я**: Да, я хотел бы узнать, есть ли у вас в наличии вот эта штуковина. Артикул 123456789.

**BB**: Минутку, сэр, сейчас проверю. Похоже, у нас этого нет в наличии, но в магазине во Флувервилле есть 4 штуки.

**Я**: Флувервилль? Не совсем понимаю, где это.

**BB**: Этот магазин расположен недалеко от торгового центра Флувервилль.

**Я**: Я там никогда не был. Можете подсказать, как туда добраться?

**BB**: Конечно. Садитесь на трассу 345 и езжайте несколько миль. Затем поверните налево у заправки — кажется, это Gas-O-Rama, но не уверен. Проедете еще несколько миль и увидите большую дорогу. Не помню, как она называется, но в итоге она переходит во Флувервилль-роуд. Кажется, нужно повернуть направо. Там будет McRonalds. Когда увидите… [далее следуют очень размытые указания] … и вот вы увидите вывеску Best Buy.

Сказать, что инструкции были бесполезными — ничего не сказать. Вот как бы мне хотелось, чтобы прошел этот разговор:

**BB**: Этот магазин расположен недалеко от торгового центра Флувервилль.

**Я**: Я там никогда не был. Можете подсказать, как туда добраться?

**BB**: Конечно. Если вы дадите мне свой адрес и номер телефона, я с удовольствием отправлю вам карту с маршрутом прямо на телефон.

**Я**: Отлично! Я живу по адресу Городтон, улица Мейн-стрит, 123, мой номер телефона 555-555-5555.

**BB**: Карта должна прийти на ваш телефон через несколько секунд. Могу я еще чем-то помочь?

В этой статье мы покажем, как создать такое решение. Объединив API Best Buy, Bing Maps и немного Twilio с базовой веб-разработкой на JavaScript и ASP.NET MVC, мы создадим сайт, который сможет найти товар в ближайшем Best Buy и отправить персонализированную карту маршрута прямо на телефон в виде MMS-сообщения. Давайте начнем!

Как и в любом строительном проекте, нам понадобятся материалы для начала. В данном случае мы будем использовать несколько различных API:

— API Best Buy — предоставляет информацию о наличии товара и местоположении магазинов. Зарегистрируйтесь для бесплатного доступа к API Best Buy.

— Bing Maps REST API — позволяет генерировать статическое изображение карты с наложенным маршрутом. Доступ к Bing Maps REST API также бесплатен.

— API Twilio — с помощью номера телефона в США или Канаде, поддерживающего MMS, позволяет отправлять сгенерированное изображение карты на телефон через MMS-сообщение. Зарегистрируйтесь для получения бесплатной учетной записи Twilio.

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

Первая проблема, которую нам нужно решить, — это поиск товаров в местном Best Buy. Для этого мы создадим простую веб-страницу, которую может использовать сотрудник магазина для проверки наличия товара в определенном месте. Страница использует Bootstrap для отображения красиво оформленной HTML-формы, где сотрудник может ввести артикул товара, почтовый индекс и радиус поиска:

Когда нажимается кнопка «Поиск», веб-страница с помощью jQuery отправляет значения формы в виде AJAX-запроса к API Best Buy. Конечная точка API, которую мы используем, принимает эти значения и находит все магазины Best Buy в указанном радиусе, где есть товар с данным артикулом в наличии, возвращая список этих магазинов в формате JSON.

Поскольку этот запрос исходит непосредственно с веб-страницы, jQuery необходимо настроить для выполнения запроса с использованием JSONP, который поддерживается API Best Buy. Для этого установите параметр *dataType* в значение `jsonp` и параметр *jsonpCallback* в функцию с именем *listProducts*, которую вы можете добавить на свою страницу.

После того как API Best Buy успешно возвращает результаты веб-приложению, нам нужно их отобразить. Для этого я выбрал шаблоны Mustache и создал простой шаблон для отображения адреса каждого магазина, полученного из API Best Buy.