![](https://habrastorage.org/getpro/habr/post_images/fb4/ea5/c40/fb4ea5c40d6d9ad5879fae9c6f10979a.jpg)
*Whoision — официальное название сервиса, с налетом еле заметной иронии.
Все веб-дизайнеры хорошо знакомы с InvisionApp — веб-сервисом, который помогает получать качественную обратную связь от клиента и демонстрировать результаты своей работы онлайн.
Сам по себе сервис прекрасный, там можно даже связывать макеты отдельных страничек в прототип. Одна загвоздка — ограничение по количеству активных проектов и участников демонстрации. Платный аккаунт всё решает, но у наших ребят давно зачесались руки устроить хакатон. А это значит, что мы построим свой Инвижин, с драг-н-дропом и Google-синхронизацией.
На весь проект у нас одни сутки. Сознаемся, дизайн и верстку мы вынесли за пределы хакатона — делали всё это непосредственно перед ним. Как и тестирование, которое мы перенесли на следующий день. Всё это, с одной стороны, нивелирует наш героический подвиг, но с другой — романтики в нем меньше не становится.
Итак, хроника рабочего процесса со слов участников. В конце — ссылка на сам сервис, для нетерпеливых.
Часть 1. Внешняя сторона хакатона. Веб-сервис за 24 часа
Думаем!
Мысленно выкидываем из Invision всё, что раздражает или просто кажется лишним. Придумываем концепцию будущего сервиса.
Бэклог!
Пишем его быстро, в Google-доках. Делаем экспресс-оценку фич, расставляем приоритеты.
Дизайн!
Наш арт-директор делает дизайн всех экранов, беря элементы из Bootstrap — чтобы облегчить верстку. Нарезочка из кусков интерфейса, вкуснота:
![](https://habrastorage.org/getpro/habr/post_images/881/7eb/910/8817eb9108fb6bf9bfe78c8b8ca88d65.png)
Макеты!
Верстаем рабочие экраны в Bootstrap, вот уж где ванильный хардкор! Готово!
Синхронизация!
Где есть много свободного серверного места? На Google! Кто раздает аккаунты, пригодные для авторизации на нашем сервисе? Снова Google! C чем мы будем делать синхронизацию? C Google!
Проекты!
Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!
Загружаем!
Делаем удобнейший загрузчик макетов: обвел, перетащил, загрузил!
![](https://habrastorage.org/getpro/habr/post_images/a52/43b/957/a5243b957a5179a90549f7bfeac63d81.jpg)
Подготовка!
Закачик хочет красивую картинку, так сделай ее в Хуижине! Выровняй слайды, подбери цвет фона, скопируй ссылку!
![](https://habrastorage.org/getpro/habr/post_images/d1a/ac2/be1/d1aac2be196679998d4add2ae833c5f1.jpg)
Демонстрация!
Сколько угодно народу с Google-аккаунтами могут смотреть ваш макет и комментировать! Достаточно ткнуть в нужное место, написать коммент и вуаля — его увидят коллеги.
Тестирование!
На хакатоне тестить некогда, поэтому вдумчиво тестим на следующий день, потягивая какавушку!
Деплой!
Покупаем домен, выкладываемся на хостинг, получаем рабочий сервис!
![](https://habrastorage.org/getpro/habr/post_images/ce8/885/985/ce888598591c2f817dc477b9a6ed9b52.jpg)
![](https://habrastorage.org/getpro/habr/post_images/dc1/0d1/9ab/dc10d19abe2de269eaadaae37db3892c.png)
Чем радует Whoision:
- Быстрая авторизация — один клик и вы полноценный пользователь.
- Удобное хранение файлов на Google Drive — всегда можно поредактировать свои проекты, даже не заходя на сайт сервиса.
- Синхронизация — всегда актуальное состояние проектов: и в драйве, и в личном кабинете.
- Настройка показа, можно выровнять слайды и подобрать фоновый цвет — чтобы подавать дизайн в подобающем виде.
- Совместное комментирование — помогает собрать качественную и визуальную обратную связь.
И для самых любопытствующих. Команде волонтеров посвящается.
Часть 2. Обратная сторона хакатона. Репортаж пост-фактум
Исправно интервьюирует копирайтер Рома.
Рома: Ребят, всё, что я знаю, так это что у вас был хакатон и что проект назывался Whoision (далее употребляется транскрипция «хуижин» — прим. авт.).
Алексей: И до сих пор называется!
![](https://habrastorage.org/getpro/habr/post_images/31e/3ed/4ca/31e3ed4caf8aa7270dc882b7fca5a5cc.png)
Рома: Ок, до сих пор :) Поэтому рассказывайте буквально всё: как пришли к проекту, как проходил сам хакатон. Я так понимаю, что началось с того, что «мы решили сделать свой Invision».
![](https://habrastorage.org/getpro/habr/post_images/3cd/def/fa5/3cddeffa5c47a5a847d7decebddabc17.png)
Марат: У ребят было желание покодить в свободное время. И, в общем-то, мы пришли и покодили. Тебе надо было вчера прийти на ретроспективу.
![](https://habrastorage.org/getpro/habr/post_images/0c1/dc7/412/0c1dc741251654be8f17232356ad196b.png)
![](https://habrastorage.org/getpro/habr/post_images/3cd/def/fa5/3cddeffa5c47a5a847d7decebddabc17.png)
Рома: Мощно! Ну ок, давайте по порядку. Вы все пришли к девяти утра и...
Алексей: Ненене, каждый приходил, когда хотел. Марат пришел к 11-ти, я к 12-ти.
Иван: Я пришел по традиции первым, в 9:20, настроил окружение… Потом Леха пришел.
Алексей Второй: Я предупредил всех домашних, что выпадаю на день из реальности. Они не без раздражения смирились.
![](https://habrastorage.org/getpro/habr/post_images/f0d/446/ade/f0d446ade5e1ac63bf74aa46a98568c6.png)
![](https://habrastorage.org/getpro/habr/post_images/3cd/def/fa5/3cddeffa5c47a5a847d7decebddabc17.png)
Иван: На самом деле, я предполагал, что хакатону быть еще две недели назад. Поэтому почитал документацию, подготовил кое-что заранее…
![](https://habrastorage.org/getpro/habr/post_images/4f5/b3b/840/4f5b3b84058ca6dc146ad215acff9d91.png)
Рома: А что вообще было готово к началу? Вы работали уже с начатым проектом, или...? Ну и кто что делал — тоже рассказывайте.
Иван: У нас был список фич, не самый детальный, правда — кое-что приходилось додумывать по ходу. Верстку и окружение, как я уже говорил, я подготовил заранее.
Марат: Я вообще сам кодить не собирался, думал, потестирую, за пиццей сбегаю, кофе заварю… ;) Пришел, не обнаружил второго Лёху, понял, что у нас два разработчика и один тестер, пришлось вспоминать азы. Кстати, очень быстро все вспомнилось.
Алексей Второй: Я натягивал верстку, клиентскую часть почти не трогал, в основном делал серверную часть: комментарии, синхронизацию.
Рома: Вот, насколько я помню, Инвижин — довольно навороченный сервис, где можно загружать макеты, оставлять комментарии по клику, со множественной авторизацией. А что умеет Хуижин?
Марат: Пытались научить его пиццу заказывать — так и не научили :) А вообще на сервис можно загружать свои макеты и показывать результат работы заказчику. Авторизация на сервисе происходит автоматически, используется Google-аккаунт. На Google-драйве же хранятся все изображения, то есть если вы создаете в Хуижине новый проект и загружаете в него картинки — у вас на драйве создается папка whoision, в которой появляется папка по названию проекта. И в нее заливаются макеты. Бесхитростно и очень удобно.
Иван: Если загружать картинки в гуглодрайв, то в Хуижине тоже создаются проекты. То есть работает обратная синхронизация. На проекте пробовали впервые писать на node.js — крутая штука. Также работали с Mongo DB, тоже понравилась эта база данных.
Рома: Конфликты на проекте были?
Алексей: Конфликты были в основном по одинаковому сценарию: один создает класс, второй заходит в код и тут же начинает его рефакторить.
![](https://habrastorage.org/getpro/habr/post_images/3cd/def/fa5/3cddeffa5c47a5a847d7decebddabc17.png)
Марат: Нам было весело, я море кайфа получил. Вспомнил, как программировать, просто побывал в этом чаду угара.
Алексей: Я думал, не продержусь до конца. В итоге таки просидел до часу ночи.
Марат: Да, просто мы с Лехой из клуба в восемь утра ушли. Потом каждый проснулся и осознал, что сегодня хакатон. Спали часа по два-три каждый.
Рома: Как вообще выживали-то?
Иван: В обед прервались на пинг-понг, после него голова заработала значительно лучше.
Рома: А заправлялись чем?
Алексей: Мы часов в пять с Маратом начали бухать.
Марат: Ложь и клевета :D
Алексей Второй: Я пробовал работать на энергетиках. Так вот, Адреналин Раш с бананом — говно!
Рома: На сколько по времени задач было? И вообще почему хакатон? Можно ведь было спокойно выделить время, зарезервировать команду, распланировать спринты...
![](https://habrastorage.org/getpro/habr/post_images/3cd/def/fa5/3cddeffa5c47a5a847d7decebddabc17.png)
Алексей Второй: Я впервые на хакатоне, понравилось, время проходило очень быстро. Пришел — хоп! — пора в теннис играть, — хоп! — сделали проект.
Вот такая история.
Лично буду очень благодарен, если вы захотите потестировать сервис и написать замечания и предложения. Можно прямо в комментах, а можно мне на почту zevvs@sibirix.ru.
Кнопка-ссылка:
![](https://habrastorage.org/getpro/habr/post_images/dc1/0d1/9ab/dc10d19abe2de269eaadaae37db3892c.png)