*Whoision — официальное название сервиса, с налетом еле заметной иронии.
Все веб-дизайнеры хорошо знакомы с InvisionApp — веб-сервисом, который помогает получать качественную обратную связь от клиента и демонстрировать результаты своей работы онлайн.
Сам по себе сервис прекрасный, там можно даже связывать макеты отдельных страничек в прототип. Одна загвоздка — ограничение по количеству активных проектов и участников демонстрации. Платный аккаунт всё решает, но у наших ребят давно зачесались руки устроить хакатон. А это значит, что мы построим свой Инвижин, с драг-н-дропом и Google-синхронизацией.
На весь проект у нас одни сутки. Сознаемся, дизайн и верстку мы вынесли за пределы хакатона — делали всё это непосредственно перед ним. Как и тестирование, которое мы перенесли на следующий день. Всё это, с одной стороны, нивелирует наш героический подвиг, но с другой — романтики в нем меньше не становится.
Итак, хроника рабочего процесса со слов участников. В конце — ссылка на сам сервис, для нетерпеливых.
Часть 1. Внешняя сторона хакатона. Веб-сервис за 24 часа
Думаем!
Мысленно выкидываем из Invision всё, что раздражает или просто кажется лишним. Придумываем концепцию будущего сервиса.
Бэклог!
Пишем его быстро, в Google-доках. Делаем экспресс-оценку фич, расставляем приоритеты.
Дизайн!
Наш арт-директор делает дизайн всех экранов, беря элементы из Bootstrap — чтобы облегчить верстку. Нарезочка из кусков интерфейса, вкуснота:
Макеты!
Верстаем рабочие экраны в Bootstrap, вот уж где ванильный хардкор! Готово!
Синхронизация!
Где есть много свободного серверного места? На Google! Кто раздает аккаунты, пригодные для авторизации на нашем сервисе? Снова Google! C чем мы будем делать синхронизацию? C Google!
Проекты!
Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!
Загружаем!
Делаем удобнейший загрузчик макетов: обвел, перетащил, загрузил!
Подготовка!
Закачик хочет красивую картинку, так сделай ее в Хуижине! Выровняй слайды, подбери цвет фона, скопируй ссылку!
Демонстрация!
Сколько угодно народу с Google-аккаунтами могут смотреть ваш макет и комментировать! Достаточно ткнуть в нужное место, написать коммент и вуаля — его увидят коллеги.
Тестирование!
На хакатоне тестить некогда, поэтому вдумчиво тестим на следующий день, потягивая какавушку!
Деплой!
Покупаем домен, выкладываемся на , получаем рабочий сервис!
Чем радует Whoision:
- Быстрая авторизация — один клик и вы полноценный пользователь.
- Удобное хранение файлов на Google Drive — всегда можно поредактировать свои проекты, даже не заходя на сайт сервиса.
- Синхронизация — всегда актуальное состояние проектов: и в драйве, и в личном кабинете.
- Настройка показа, можно выровнять слайды и подобрать фоновый цвет — чтобы подавать дизайн в подобающем виде.
- Совместное комментирование — помогает собрать качественную и визуальную обратную связь.
И для самых любопытствующих. Команде волонтеров посвящается.
Часть 2. Обратная сторона хакатона. Репортаж пост-фактум
Исправно интервьюирует копирайтер Рома.
Рома: Ребят, всё, что я знаю, так это что у вас был хакатон и что проект назывался Whoision (далее употребляется транскрипция «хуижин» — прим. авт.).
Алексей: И до сих пор называется!
Рома: Ок, до сих пор :) Поэтому рассказывайте буквально всё: как пришли к проекту, как проходил сам хакатон. Я так понимаю, что началось с того, что «мы решили сделать свой Invision».
Владимир: Да, нам обломно платить буржуям, поэтому поступили сурово: действительно решили сделать свой инвижин.
Марат: У ребят было желание покодить в свободное время. И, в общем-то, мы пришли и покодили. Тебе надо было вчера прийти на ретроспективу.
Владимир: Кстати, это второй хакатон. Первый проводили два года назад, в итоге сделали онлайн-сервис для игры в Planning Poker. И тоже за сутки.
Рома: Мощно! Ну ок, давайте по порядку. Вы все пришли к девяти утра и...
Алексей: Ненене, каждый приходил, когда хотел. Марат пришел к 11-ти, я к 12-ти.
Иван: Я пришел по традиции первым, в 9:20, настроил окружение… Потом Леха пришел.
Алексей Второй: Я предупредил всех домашних, что выпадаю на день из реальности. Они не без раздражения смирились.
Владимир: Иван очень здорово помог в плане подготовки к началу работы. У нас был сверстанный макет и готовое окружение.
Иван: На самом деле, я предполагал, что хакатону быть еще две недели назад. Поэтому почитал документацию, подготовил кое-что заранее…
Рома: А что вообще было готово к началу? Вы работали уже с начатым проектом, или...? Ну и кто что делал — тоже рассказывайте.
Иван: У нас был список фич, не самый детальный, правда — кое-что приходилось додумывать по ходу. Верстку и окружение, как я уже говорил, я подготовил заранее.
Марат: Я вообще сам кодить не собирался, думал, потестирую, за пиццей сбегаю, кофе заварю… ;) Пришел, не обнаружил второго Лёху, понял, что у нас два разработчика и один тестер, пришлось вспоминать азы. Кстати, очень быстро все вспомнилось.
Алексей Второй: Я натягивал верстку, клиентскую часть почти не трогал, в основном делал серверную часть: комментарии, синхронизацию.
Рома: Вот, насколько я помню, Инвижин — довольно навороченный сервис, где можно загружать макеты, оставлять комментарии по клику, со множественной авторизацией. А что умеет Хуижин?
Марат: Пытались научить его пиццу заказывать — так и не научили :) А вообще на сервис можно загружать свои макеты и показывать результат работы заказчику. Авторизация на сервисе происходит автоматически, используется Google-аккаунт. На Google-драйве же хранятся все изображения, то есть если вы создаете в Хуижине новый проект и загружаете в него картинки — у вас на драйве создается папка whoision, в которой появляется папка по названию проекта. И в нее заливаются макеты. Бесхитростно и очень удобно.
Иван: Если загружать картинки в гуглодрайв, то в Хуижине тоже создаются проекты. То есть работает обратная синхронизация. На проекте пробовали впервые писать на node.js — крутая штука. Также работали с Mongo DB, тоже понравилась эта база данных.
Рома: Конфликты на проекте были?
Алексей: Конфликты были в основном по одинаковому сценарию: один создает класс, второй заходит в код и тут же начинает его рефакторить.
Владимир: Есть такая болезнь, называется «этот код говно, потому что его писал не я» :)
Марат: Нам было весело, я море кайфа получил. Вспомнил, как программировать, просто побывал в этом чаду угара.
Алексей: Я думал, не продержусь до конца. В итоге таки просидел до часу ночи.
Марат: Да, просто мы с Лехой из клуба в восемь утра ушли. Потом каждый проснулся и осознал, что сегодня хакатон. Спали часа по два-три каждый.
Рома: Как вообще выживали-то?
Иван: В обед прервались на пинг-понг, после него голова заработала значительно лучше.
Рома: А заправлялись чем?
Алексей: Мы часов в пять с Маратом начали бухать.
Марат: Ложь и клевета :D
Алексей Второй: Я пробовал работать на энергетиках. Так вот, Адреналин Раш с бананом — говно!
Рома: На сколько по времени задач было? И вообще почему хакатон? Можно ведь было спокойно выделить время, зарезервировать команду, распланировать спринты...
Владимир: Тут же прикол в том, что это драйвово. И что за день можно собрать довольно большой проект на чистом адреналине. И еще на таких проектах можно оттачивать технологии, не боясь факапа. Профакапились — ну и ладно. А вообще по итогам оценки задач было на 80 часов, что вчетвером за день сделать нереально. Поэтому предварительная работа всё-таки была — спасибо Ивану. И я считаю, это правильно — в хакатоне должен быть только драйв ;)
Алексей Второй: Я впервые на хакатоне, понравилось, время проходило очень быстро. Пришел — хоп! — пора в теннис играть, — хоп! — сделали проект.
Вот такая история.
Лично буду очень благодарен, если вы захотите потестировать сервис и написать замечания и предложения. Можно прямо в комментах, а можно мне на почту zevvs@sibirix.ru.
Кнопка-ссылка:
