Прогноз настроения от IKEA

В июле мы запустили проект «Прогноз настроения» для IKEA. Идея, креатив, съемка/пост-продакшен интерьеров и дизайн проекта принадлежат агентству Instinct. Вся техническая часть проекта выполнена в SmartHead.

Идея проекта заключается в том, чтобы показать посетителю всё многообразие интерьеров, которые могут быть реализованы из 363 предметов из каталога IKEA. Отправной точкой для демонстрации одного из 227 интерьеров является погода за окном.

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

Управление контентом

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

Кстати, цены на проекте всегда актуальны, так как ежедневно обновляются с помощью API.

Интересная особенность, которую было сложно спрогнозировать

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

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

География

Отдельная история в проекте — формирование базы данных городов. Казалось бы, очевидное решение — использовать API Google или Яndex было отметено сразу же. В этом нас ограничивало требование — во время ввода названия населенного пункта показывать записи с похожими названиями со всего мира. А карты вышеуказанных сервисов, кроме населенных пунктов, выдают названия улиц, киосков, зданий, достопримечательностей и много чего еще. Можно было бы «парсить» ответ от этих сервисов, но это могло привести к снижению производительности. Прибавьте к этому необходимость слать запрос после ввода очередного символа пользователем, умножьте это на количество уникальных пользователей в сутки и мы рисковали получить бан от обоих.
В итоге мы решили подготовить свою базу населенных пунктов со всего мира. При этом необходимо решить несколько проблем.

  • Необходимо, чтобы населенный пункт был привязан к стране, т.к. одинаковых названий по всему миру множество. Решение — рядом с городам указывать название страны.
  • Необходимо устранить коллизию с одинаковыми названиями городов в одной стране. Но об этом далее.
  • Кроме страны, для каждого города необходимо иметь его геоданные — благодаря им мы определяем прогноз погоды.
  • И последнее требование к базе городов — необходимо, чтобы и страна и город были как на русском, так и на английском (для англ.версии сайта).

Удивительно, но такая база городов была найдена (свыше 100 000 населенных пунктов с геоданными и привязкой к странам). Правда, в основном на английском языке — только 2% городов имели названия на русском.

Следующим шагом нужно было перевести недостающие названия городов на английский язык.
Проведя анализ имеющегося материала, был написан специальный скрипт, который работал сразу по нескольким сценариям перевода одновременно (если не срабатывал перевод по одному сценарию, отрабатывался другой). На очередной попытке запустить скрипт, он, наконец, стал выдавать приемлемые результаты, и через сутки у нас были переводы недостающих городов.

С подачи клиента, решением проблемы с одинаковыми названиями городов в стране стало указание название региона для российских городов, а для остальных стран оставлять по одному уникальному городу. Мы написали скрипты обработки нашей базы городов, которые сначала выдали нам список одинаковых городов РФ с возможностью редактировать их названия. Затем мы подготовили скрипт по выдаче одинаковых городов в рамках отдельной страны с ссылками на гео-данные на карте Google/Яndex с целью определения самого населенного города. Его-то название мы и показывали пользователю.

Еще один интересный нюанс. Если пользователь вводит слово «Санкт», то, скорее всего, он хочет видеть «Санкт-Петербург» России. Для этого в базе городов мы ввели понятие «Приоритезация результатов поиска» для городов. В списке похожих городов сначала выводятся российские города, затем города-миллионники, а затем все остальные.

Саунд-трек

Общее музыкальное оформление генерируется на основе таких погодных параметров, как сила ветра, влажность, температура, давление и количество осадков. Каждый из параметров имеет пять значений. И если с температурой понятно, как разделить ее на сегменты, то со значениями остальных параметров пришлось потрудиться. Что такое «сильный ветер», «низкая влажность», или «повышенное давление» — определения этих значений нам пришлось выявлять самим, на основе параметров, выдаваемых погодным сервисом openweathermap.org. На сайте одновременно играет шесть дорожек. Пять из них — длительностью 32 секунды, и одна дорожка основной мелодии длительностью больше минуты. В итоге, практически каждый раз, вы слышите оригинальный саунд-трек, который соответствует комбинации этих погодных характеристик.

Для одновременного и синхронного воспроизведения шести звуковых дорожек, мы использовали Web Audio Api. Именно эта технология нам позволила реализовать задуманное креативной командой агентства.

В музыкальном оформлении нам помогал композитор Константин Чубаков.

Оптимизация

Сайт подгружает большое количество медиа-данных (изображение интерьеров, звуковые дорожки, иконки, сопутствующие материалы для анимации за окном). Для целью ускорения загрузки контента нам пришлось проделать большую работу по оптимизации. Мы реализовали кеширование запросов состояния погоды и сборщика изображения для социальных сетей, оптимизировали все используемые на сайте изображения интерьеров в разных форматах для разных устройств, и многое другое. В результате нам удалось добиться приемлемых результатов.

В скором будущем мы реализуем много приятных дополнений на сайте. Следите за новостями!