Хакатон 2gis - проект akademo

26 - 28 февраля 2016 года я принял участие в городоском хакатоне от 2gis и усилиями команды был выпущен продукт: akademo.ru.

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

Базовый workflow:

1. Установить слайдеры в необходимое положение
2. Выбрать понравившееся место на карте или справа с списке
3. Нажать на фото, чтобы посмотреть более подробную информацию о месте.

Наша команда состояла из двух человек. Суммарно перед нами стояли такие задачи:

• frontend (с версткой)
• backend
• контент
• дизайн

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

Технологии

Серверная часть была написана на springboot. Для хранения БД была использована mysql, которая связана с приложением через spring-data-jpa. Также была админка защищенная с помощью spring-security. Все эти технологии позволяют очень  быстро все сделать без лишних проблем. 

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

• angular JS 1.5
• bootstrap 3.3.6
• jquery 2.2.0 
• jquery-ui 1.11.4 
• 2gis api

Сборка проекта была сделана по схеме, описанной тут: пост про сборку. Деплой проекта был осуществлен на сервер, который я арендовал здесь: пост про сервер. 

Ход работы

Заранее до хакатона, зная, что работать придется с картой 2gis, я изучил их API до необходимого мне уровня. Также я предвидел, что будет очень сложно вводить координаты мест напрямую в БД, поэтому заранее создал админку, которая заполняет базу данных мест.

Как видно, можно выделять маркеры, перетаскивать и редактировать описание. Заодно я обернул в angular service карту и создал angular директиву для работы со слайдером. Это все было потом использовано в основном функционале приложения.

Таким образом, заранее было сделано:

• Настроен сервер, куплен и привязан домен
• Настроена БД
• Сделана минимальная система администрирования
• angular обертка для 2gis карты
• angular директива для слайдера
• скелет основного функционала приложения

На самом хакатоне удалось сделать:

• Верстка главной страницы
• Серверная и клиентская логика основного функционала

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

В итоге

В итоге за 3 вечера подготовки и 24-26 часов работы непосредственно на хакатоне удалось за 15 минут до дедлайна осуществить релиз. Я рад этому результату, поскольку хакатон позволил одновременно натренировать и проверить возможности работы в экстремальных ситуациях. 

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

• Разобраться с бардаком в css, там слишком много стилей, которые можно использовать эффективней и аккуратней.
• Увеличить скорость загрузки приложения. (Картинки уменьшить, скрипты и css объединить, настроить кэш запросов к БД)