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


    *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.

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


    Сибирикс 51,31
    Компания
    Поделиться публикацией
    Комментарии 64
    • +57
      Название доставило.
      • +3
        Неимоверно. Я думал глумится кто-то.
        • +1
          Да это старая тема.
          Яндекс — Шмандекс
          Гугл — whoyougle
          • +67
            Оффтоп
            • НЛО прилетело и опубликовало эту надпись здесь
            • +2
              Баунти-шмаунти, сникерсы-шмуикерсы.
              • +1
                Есть служба такси — «Макси».
                • +1
                  А еще «птица — синица» (с) :DDD
                  • +3
                    A well a don't you know about the bird?
                    Well, everybody knows that the bird is the word!


              • НЛО прилетело и опубликовало эту надпись здесь
            • +16
              И как предложить это клиенту?
              — мы будем делать макеты и по ходу выполнения выкладывать их в Хуижн, вас тоже в этот Хуижн пригласим, будете там комментарии к нашему дизайну писать.

              или:
              — Алло, Николай Петрович? Вы видели вчерашние макеты в нашем с вами Хуижине?
              • +2
                Да никак не предлагать, никто ж вас насильно не тащит. Если вам важнее «сохранить лицо» перед клиентами — шлите им свои макеты в почте аттачами, пусть оценивают.

                Можно, конечно, у самих клиентов спросить, что им лучше. Смогут ли они великодушно закрыть глаза на название и пользоваться тем, что удобнее, или же предпочитают пусть менее удобно, зато без «этого недостойного слова». Только как же такое спросишь, это ж СТЫДНО — такое спрашивать. Клавиатуру придется мыть после такого вопроса…
                • 0
                  Ну для особо интеллигентных можно говорить «ИКСИГРЕКИЖИН».
                  • +2
                    Предварительно проверьте их песней Майкла Джексона «Who is it?».
                    • 0
                      Есть замечательный саундтрек к Охотникам за привидениями — «Who you gonna call? — Ghostbusters!»
                  • 0
                    За что в карму то нагадили?
                    Порой не понимаю политики хабра.
                    • +2
                      Ооо… дорогой друг, я тут 6 лет, и давно уже не понимаю хабр… Комментарии зелены от плюсов, а карма в неделю на 5 пунктов падает. Я даже издевки ради информацию «о себе» изменил, но не помогает :)
                      • 0
                        Не пытайтесь — это не политика хабра, а ее аудитория.
                    • +9
                      смело
                      • 0
                        Насчёт загрузки картинок: Я попытался загрузить файл с таким названием «Картинка.PNG» и мне выдало ошибку «Неверный тип файла». Сделайте лучше проверку по заголовкам файла
                        • –4
                          *Whoision — официальное название сервиса, с налетом еле заметной иронии.
                          Нифига себе «еле заметной»! Да это первое, что прямо врывается в глаза! Почти все же (жившие достаточное время в России или достаточно долго говорившие на русском языке) знают прямую аналогию Вашему: «Прачечная? Who-ячечная» :)
                          • +30
                            Как в том анекдоте, про Асус-Хуасус, Асер-Хуасер, Хуавей-Хуавей.
                            • 0
                              Фирма Huawei отличается исключительной честностью для своих покупателей.
                            • +1
                              Авторизовался, создал папку в Google-драйве — получил новый проект в Хуижине. Создал новый проект в Хуижине — получил новую папку в гуглодрайве. Работает!


                              Не, не работает. А жаль, ибо очень полезный сервис намечается. С удовольствием буду пользоваться.
                              • 0
                                Тоже дальше регистрации не пустило
                                • +1
                                  попробуйте skwibl он тоже бесплатный и скоро выйдет новая улучшенная версия.
                                  • 0
                                    А что они планируют поменять?
                                    • 0
                                      Проверьте на следующей неделе, уже будет новая версия.
                                • +4
                                  Новый проект не создаётся. Ошибок не выводит.
                                  • +1
                                    На самом деле возвращается ошибка аля «File not found: 0BzNBtasLbejpaVhQVVYtbThDaW8» просто в интерфейс не выводит, видимо на гугл драйве то ли файл не получается создать, то ли нужно руками что создавать.
                                    • 0
                                      Чорт, однако хабраэффект. GoogleApi не успевает отрабатывать :(
                                      • 0
                                        И что делать нам:?
                                    • 0
                                      Почему-то в гугл-драйве создалось два каталога «whoision». Зачем?
                                      И еще нет вертикального выравнивания картинок. И глючит фоновый цвет — устанавливается когда ему вздумается. Хмм… И все остальное тоже глючит. А в целом — отличная идея!
                                      • 0
                                        С таким-то названием вам точно никто не обещал, что всё будет работать правильно!
                                      • +12
                                        название с помощью этого сервиса huifikator.ru/ придумали??
                                        • +2
                                          Да!
                                          • 0
                                            Ну вот, там теперь Хабраэффект.
                                            • 0
                                              Уже заработало, я видимо в нехороший момент попал, когда тормозило…
                                            • 0
                                              Не, тогда б было «who-инвижин»
                                              • +1
                                                Спасибо, теперь я читаю комментарии к этому анонсу там :)
                                                • +3
                                                  Автор проекта просил передать, что: «был бы рад инвайту на Хабр! :)»
                                                  • 0
                                                    Много думал - многое понял ))
                                                    Преподаватели-хуеподаватели кафедры-хуяфедры
                                                  • +3
                                                    От таких названий Артемий мерещится )
                                                    • +2
                                                      * удалено: причина не в там нарезал *
                                                    • +6
                                                      Чем хороши такие названия, даже в закладки добавлять не надо. Понадобится, вспомнится :)
                                                      • 0
                                                        Надо сделать, чтобы можно было добавлять группы «видимости» пользователей проекта.
                                                        • 0
                                                          А я только узнал о вас, решил попробовать ПланнингПокер онлайн, а там: циклическая ссылка.
                                                          • –1
                                                            … и сделать уведомление об «ответе»

                                                            Кстати хабраэффект

                                                            • –1
                                                              Проект не создается — хабраэффект?
                                                            • 0
                                                              И сразу же баг вылез: нельзя загрузить файл с расширением .PNG (большими буквами)
                                                              Не хватает кнопки обратной связи!
                                                              • 0
                                                                О, ща босу отправлю письмо со ссылкой, как раз закончил главную страницу нового проекта :)
                                                                • 0
                                                                  А как удалить коммент к макету? Хотя бы свой?
                                                                • +3
                                                                  Мне понравилось, но при авторизации написано английским языком что оно будет иметь доступ к моим файлам и директориям на гугл диске, нажал отмена, после чего «все упало»

                                                                  • 0
                                                                    Лебовский нарушает правила колористики и типографики!
                                                                    • 0
                                                                      Понравилось!)
                                                                      Но мои клиенты на столько олдскульны, что у них нет аккаунта Google.
                                                                      Возможно ли оставлять комментарий к салайду без аккаунта?
                                                                      • 0
                                                                        Пока нет, но изначально планировалось. Фича, безусловно, полезная :)
                                                                      • +1
                                                                        Напомнило картинку «Метрополитен имени Лебедева».
                                                                        i.imgur.com/Zxe6JrC.png
                                                                        • 0
                                                                          error: "create folder error"
                                                                          message: {errors:[{domain:global, reason:notFound, message:File not found: 0BxwWUtJfvIpAcFpQcWFwMTE2dVU}],…}
                                                                          code: 404
                                                                          errors: [{domain:global, reason:notFound, message:File not found: 0BxwWUtJfvIpAcFpQcWFwMTE2dVU}]
                                                                          message: "File not found: 0BxwWUtJfvIpAcFpQcWFwMTE2dVU"
                                                                          result: "error"
                                                                          


                                                                          Непосоздавать =\
                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                            • 0
                                                                              Еле заметная ирония, конечно, хороша — спору нет.
                                                                              Но я не хотел бы быть на месте наемного работника, который должен был бы презентовать это сервис суровому руководству, не разделяющему нотки иронии.
                                                                              — Предлагаю вам взглянуть на шикарный сервис — Хуижин.
                                                                              — Хуи простите что?
                                                                              • 0
                                                                                Интерактив — кнопки при переходе. Клиенты как будто нажимают на кнопки пи перемещаются между слайдами — вот это, конечно, приемущество инвижина, которое не реализовали.

                                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                Самое читаемое