Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

в 10:29, , рубрики: Без рубрики

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp
*Whoision — официальное название сервиса, с налетом еле заметной иронии.

Все веб-дизайнеры хорошо знакомы с InvisionApp — веб-сервисом, который помогает получать качественную обратную связь от клиента и демонстрировать результаты своей работы онлайн.

Сам по себе сервис прекрасный, там можно даже связывать макеты отдельных страничек в прототип. Одна загвоздка — ограничение по количеству активных проектов и участников демонстрации. Платный аккаунт всё решает, но у наших ребят давно зачесались руки устроить хакатон. А это значит, что мы построим свой Инвижин, с драг-н-дропом и Google-синхронизацией.

На весь проект у нас одни сутки. Сознаемся, дизайн и верстку мы вынесли за пределы хакатона — делали всё это непосредственно перед ним. Как и тестирование, которое мы перенесли на следующий день. Всё это, с одной стороны, нивелирует наш героический подвиг, но с другой — романтики в нем меньше не становится.

Итак, хроника рабочего процесса со слов участников. В конце — ссылка на сам сервис, для нетерпеливых.

Часть 1. Внешняя сторона хакатона. Веб-сервис за 24 часа

Думаем!

Мысленно выкидываем из Invision всё, что раздражает или просто кажется лишним. Придумываем концепцию будущего сервиса.

Бэклог!

Пишем его быстро, в Google-доках. Делаем экспресс-оценку фич, расставляем приоритеты.

Дизайн!

Наш арт-директор делает дизайн всех экранов, беря элементы из Bootstrap — чтобы облегчить верстку. Нарезочка из кусков интерфейса, вкуснота:

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Макеты!

Верстаем рабочие экраны в Bootstrap, вот уж где ванильный хардкор! Готово!

Синхронизация!

Где есть много свободного серверного места? На Google! Кто раздает аккаунты, пригодные для авторизации на нашем сервисе? Снова Google! C чем мы будем делать синхронизацию? C Google!

Проекты!

Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!

Загружаем!

Делаем удобнейший загрузчик макетов: обвел, перетащил, загрузил!

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Подготовка!

Закачик хочет красивую картинку, так сделай ее в Хуижине! Выровняй слайды, подбери цвет фона, скопируй ссылку!

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Демонстрация!

Сколько угодно народу с Google-аккаунтами могут смотреть ваш макет и комментировать! Достаточно ткнуть в нужное место, написать коммент и вуаля — его увидят коллеги.

Тестирование!

На хакатоне тестить некогда, поэтому вдумчиво тестим на следующий день, потягивая какавушку!

Деплой!

Покупаем домен, выкладываемся на хостинг, получаем рабочий сервис!

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Чем радует Whoision:

  • Быстрая авторизация — один клик и вы полноценный пользователь.
  • Удобное хранение файлов на Google Drive — всегда можно поредактировать свои проекты, даже не заходя на сайт сервиса.
  • Синхронизация — всегда актуальное состояние проектов: и в драйве, и в личном кабинете.
  • Настройка показа, можно выровнять слайды и подобрать фоновый цвет — чтобы подавать дизайн в подобающем виде.
  • Совместное комментирование — помогает собрать качественную и визуальную обратную связь.

И для самых любопытствующих. Команде волонтеров посвящается.

Часть 2. Обратная сторона хакатона. Репортаж пост-фактум

Исправно интервьюирует копирайтер Рома.

Рома: Ребят, всё, что я знаю, так это что у вас был хакатон и что проект назывался Whoision (далее употребляется транскрипция «хуижин» — прим. авт.).

Алексей: И до сих пор называется!

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Рома: Ок, до сих пор :) Поэтому рассказывайте буквально всё: как пришли к проекту, как проходил сам хакатон. Я так понимаю, что началось с того, что «мы решили сделать свой Invision».

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionAppВладимир: Да, нам обломно платить буржуям, поэтому поступили сурово: действительно решили сделать свой инвижин.

Марат: У ребят было желание покодить в свободное время. И, в общем-то, мы пришли и покодили. Тебе надо было вчера прийти на ретроспективу.

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionAppВладимир: Кстати, это второй хакатон. Первый проводили два года назад, в итоге сделали онлайн-сервис для игры в Planning Poker. И тоже за сутки.

Рома: Мощно! Ну ок, давайте по порядку. Вы все пришли к девяти утра и...

Алексей: Ненене, каждый приходил, когда хотел. Марат пришел к 11-ти, я к 12-ти.

Иван: Я пришел по традиции первым, в 9:20, настроил окружение… Потом Леха пришел.

Алексей Второй: Я предупредил всех домашних, что выпадаю на день из реальности. Они не без раздражения смирились.

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionAppВладимир: Иван очень здорово помог в плане подготовки к началу работы. У нас был сверстанный макет и готовое окружение.

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

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionApp

Рома: А что вообще было готово к началу? Вы работали уже с начатым проектом, или...? Ну и кто что делал — тоже рассказывайте.

Иван: У нас был список фич, не самый детальный, правда — кое-что приходилось додумывать по ходу. Верстку и окружение, как я уже говорил, я подготовил заранее.

Марат: Я вообще сам кодить не собирался, думал, потестирую, за пиццей сбегаю, кофе заварю… ;) Пришел, не обнаружил второго Лёху, понял, что у нас два разработчика и один тестер, пришлось вспоминать азы. Кстати, очень быстро все вспомнилось.

Алексей Второй: Я натягивал верстку, клиентскую часть почти не трогал, в основном делал серверную часть: комментарии, синхронизацию.

Рома: Вот, насколько я помню, Инвижин — довольно навороченный сервис, где можно загружать макеты, оставлять комментарии по клику, со множественной авторизацией. А что умеет Хуижин?

Марат: Пытались научить его пиццу заказывать — так и не научили :) А вообще на сервис можно загружать свои макеты и показывать результат работы заказчику. Авторизация на сервисе происходит автоматически, используется Google-аккаунт. На Google-драйве же хранятся все изображения, то есть если вы создаете в Хуижине новый проект и загружаете в него картинки — у вас на драйве создается папка whoision, в которой появляется папка по названию проекта. И в нее заливаются макеты. Бесхитростно и очень удобно.

Иван: Если загружать картинки в гуглодрайв, то в Хуижине тоже создаются проекты. То есть работает обратная синхронизация. На проекте пробовали впервые писать на node.js — крутая штука. Также работали с Mongo DB, тоже понравилась эта база данных.

Рома: Конфликты на проекте были?

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

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionAppВладимир: Есть такая болезнь, называется «этот код говно, потому что его писал не я» :)

Марат: Нам было весело, я море кайфа получил. Вспомнил, как программировать, просто побывал в этом чаду угара.

Алексей: Я думал, не продержусь до конца. В итоге таки просидел до часу ночи.

Марат: Да, просто мы с Лехой из клуба в восемь утра ушли. Потом каждый проснулся и осознал, что сегодня хакатон. Спали часа по два-три каждый.

Рома: Как вообще выживали-то?

Иван: В обед прервались на пинг-понг, после него голова заработала значительно лучше.

Рома: А заправлялись чем?

Алексей: Мы часов в пять с Маратом начали бухать.

Марат: Ложь и клевета :D

Алексей Второй: Я пробовал работать на энергетиках. Так вот, Адреналин Раш с бананом — говно!

Рома: На сколько по времени задач было? И вообще почему хакатон? Можно ведь было спокойно выделить время, зарезервировать команду, распланировать спринты...

Инвижин? Хуижин!* Как мы делали бесплатный аналог InvisionAppВладимир: Тут же прикол в том, что это драйвово. И что за день можно собрать довольно большой проект на чистом адреналине. И еще на таких проектах можно оттачивать технологии, не боясь факапа. Профакапились — ну и ладно. А вообще по итогам оценки задач было на 80 часов, что вчетвером за день сделать нереально. Поэтому предварительная работа всё-таки была — спасибо Ивану. И я считаю, это правильно — в хакатоне должен быть только драйв ;)

Алексей Второй: Я впервые на хакатоне, понравилось, время проходило очень быстро. Пришел — хоп! — пора в теннис играть, — хоп! — сделали проект.


Вот такая история.

Лично буду очень благодарен, если вы захотите потестировать сервис и написать замечания и предложения. Можно прямо в комментах, а можно мне на почту zevvs@sibirix.ru.

Кнопка-ссылка:

Автор: zevvssibirix

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js