Angular Attack: мой опыт участия в хакатоне



    Angular 2 сегодня считают этаким «new kid on the block». Он многим интересен, без его упоминания не обходится практически ни одна крупная front-end конференция, и уже сейчас он готов бросить вызов React. Но до лучей абсолютной славы еще далеко — официального релиза еще не было, хотя в бою фреймворк может попробовать любой желающий. Мы в Wrike, например, уже вовсю используем Angular 2 в продакшне.

    Ребята из Google активно привлекают внимание к новому фрейворку и даже недавно провели 48-часовой онлайн хакатон ANGULAR ATTACK, который собрал несколько сотен участников. По его результатам было опубликовано более 270 работ. В этой статье я хочу поделиться опытом своего участия в хакатоне, впечатлениями и наблюдениями, которые могут вам помочь в подобных состязаниях. Добро пожаловать под кат.

    Итак, онлайн-хакатон ANGULAR ATTACK, организованный Google, Rangle.io и Wijmo, проходил 14-15 мая. Его целью было за 48 часов создать веб-приложение на Angular 2. Для участия команде была необходима регистрация на сайте и github-аккаунт.

    Правила довольно простые:

    • От 1 до 4 человек в команде
    • На создание приложения выделялось ровно 48 часов (старт хакатона одновременно по всему миру)
    • Тематика не была задана — можно было писать абсолютно все что угодно (но предпочтение отдавалось веб-приложениям).
    • Ограничений на использование инструментов тоже не было. Но предпочтительно было использовать Angular 2 (если команда претендовала на призы), бесплатные инструменты (сервисы, библиотеки, медиа-файлы).
    • Важное условие — на момент начала мероприятия у команды не должно быть никаких подготовленных заранее цифровых ассетов, будь то куски кода, картинки или что-либо еще. Весь цифровой контент должен был создаваться непосредственно в отведеннные 48 часов.
    • Перед соревнованием разрешалась любая другая подготовка: продумывание архитектуры, рисование скетчей, настройка окружения и деплоя и т. п.
    • Уличение в читерстве грозило сиюминутной дисквалификацией.

    Организаторы и спонсоры предоставили разнообразные призы (в том числе и денежные), а судейство шло по нескольким направлениям:
    • Любые люди лайкают работы участников (самая популярная работа получала приз зрительских симпатий).
    • Участники оценивают других участников и оставляют отзывы.
    • Судьи оценивают 50 самых популярных работ.

    Примерно за сутки до начала хакатона организаторы предоставили каждой команде доступ к приватным репозиториям, в которых был простой стартовый проект на Angular 2 (5 min quickstart). Также нам дали доступ к деплоймент сервису Surge, позволявшему сделать деплой приложения одной консольной командой.

    Итак, утром субботы, когда я принялся за работу, все окружение было практически готово: сборка собиралась (для сборки использовал webpack), деплой работал. В качестве языка разработки я для разнообразия выбрал TypeScript (в Wrike мы используем Dart).
    Но, сев за компьютер, я понял, что совершенно не знаю, что писать: неделя перед хакатоном выдалась загруженная, и не было времени это обдумать. Итак, очевидный, но тем не менее очень важный

    Урок №1: Готовиться к участию заранее

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

    Я начал искать идею для приложения и сразу же отмёл различные банальные вещи, типа ToDo-листов, планировщиков задач, и различных “построй маршрут на Google Maps до ближайшего магазина”. Однако за несколько часов я так и не смог родить ни одной идеи какого-нибудь «полезного» приложения, так что решил создать что-нибудь по крайней мере фановое. Например, написать игру.

    Так как это был хакатон по Angular 2, я не хотел использовать canvas, готовые движки или еще что-то, что обычно используют для разработки игр в вебе. А поскольку Angular не предназначен для написания real-time игр, то логичным было написать что-то пошаговое.

    Сразу пришла в голову идея пошаговой rogue-like игры с автогенерацией подземелий. Я принялся за работу, но через несколько часов окончательно увяз в вопросах архитектуры. Стало понятно, что идея слишком сложная для реализации одним человеком за 48 часов без предварительно проделанной “домашней работы”. Кстати, прототип подобной игры сделали одни из участников (правда, это была команда из трех человек).

    Так я извлек для себя

    Урок №2: Не стоит переоценивать свои силы

    Из-за высокой сложности многие проекты так и не дошли до релиза, хотя идеи были неплохие. И, как я осознал позднее, в идеале стоит брать такую идею, которую, как вам кажется, вы можете реализовать за день, а лучше даже за полдня (в случае с дедлайном в 48 часов).

    Итак, ближе к концу первого дня у меня не было готово ровным счетом ничего… Я понял, что либо я сейчас беру в работу какую-то довольно простую идею, либо закончу хакатон с нулевым результатом. Так что я перешел к “плану Б” — написание игры “Сапёр”, которая многим хорошо известна по стандартному набору игр в Windows.

    Впоследствии я извлек из этого

    Урок №3: Не стоит недооценивать простые идеи

    Я с самого начала не очень хотел делать что-то такое обычное, как “Сапёр”, так как мне казалось, что это слишком просто, не оригинально, и в хакатоне помимо моего будет еще с десяток разнообразных “Сапёров”. Оказалось, что я совершенно не прав: мой “Сапёр” был единственным на хакатоне. К тому же, проект стал одним из самых популярных по количеству отзывов от других участников.

    Так что

    Урок №4: Не бросайте работу на полпути

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

    И я бы не смог достичь даже этого результата, если бы не

    Урок №5: Продумать пути к отступлению

    Всегда нужно быть готовым к тому, что что-то может пойти не так. При создании своего приложения важно не хвататься за всё сразу. Лучше определить круг минимально необходимых фич, довести их до конца и, только если остается время, начинать брать в работу что-то еще. На хакатоне было много команд, которые пытались впихнуть в своё приложение как можно больше всего: анимацию, работу с БД, авторизацию через твиттер и т.п., и получали сырое приложение, которое часто просто не работало из-за большого количества багов или не выполняло основных задуманных функций.

    Начав работу над “Сапёром”, я определил список фич, которые было необходимо сделать или хотелось бы видеть в приложении. Все эти фичи были разделены условно на четыре группы.

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


    Во вторую группу я отнес задачи, которые улучшали геймплей:
    • Различные размеры игрового поля
    • Расстановка мин после первого хода игрока вместо генерации расположения мин заранее (чтобы игрок первым ходом никогда не попадал на мину)
    • Умная расстановка мин, исключающая ситуации, когда игроку приходилось бы угадывать (например, если часть игрового поля огорожена минами)
    • Возможность ставить флаги


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

    К последней группе относились такие фичи, как игровой таймер, таблица рекордов, синхронизация рекордов через Firebase (чтобы участники могли соревноваться).

    Несмотря на то, что я реализовал все задачи из первой группы, дальше с расстановкой приоритетов возникли трудности. Разработчик не всегда может адекватно оценить, какой функционал действительно имеет важное значение для конечного пользователя. Отсюда

    Урок №6: Привлекать людей к тестированию своего проекта как можно раньше

    К сожалению, я не успел сделать практически ничего из четвертой группы задач, кроме очень простой таблицы рекордов. И я не сделал задачи 3 и 4 из второй группы, решив, что визуальное оформление важнее. И хотя, в целом, игра работала и выглядела неплохо, только ленивый мне не припомнил, что я не реализовал флаги. Это вызывало у многих фрустрацию и наверняка негативно повлияло на оценки от других участников. Если бы я собрал фидбек хотя бы с 2-3 человек заранее, то, скорее всего, успел бы сделать флаги, отказавшись от менее приоритетных задач.

    И, напоследок, еще один важный

    Урок №7: Почти никому не интересен код

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

    Урок номер 8: Хороший хайп — залог успеха

    Еще один важный фактор, который влиял на популярность проекта, — то, как его рекламировали авторы. Организаторы предоставили участникам для общения канал в Slack, помимо этого команды постили свои апдейты в Твиттере. И те участники, которые активно писали о своих проектах, получали значительно больше внимания и отзывов.

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

    С полным списком победителей вы можете ознакомиться на https://www.angularattack.com/

    Напоследок я бы хотел поделиться несколькими работами, которые мне показались интересными:

    Balatone



    https://www.angularattack.com/entries/1375-balaton

    Победитель в групповом зачёте. Плеер, проигрывающий набор звуков. Каждый звук из набора можно отключать. Можно управлять скоростью воспроизведения. Вращающаяся фигура точками пересечения с осями идущими от звука к центру плеера определяет уровень громкости звука в текущий момент времени. Меняя фигуру и набор звуков, можно создавать уникальную “мелодию”.

    ngDungeon



    https://www.angularattack.com/entries/1368-sarvivalas
    А это мой личный фаворит. Проект, который, к моему великому удивлению, не попал ни в одну из номинаций. Пожалуй, один из самых популярных проектов на хакатоне.

    Ребята написали два маленьких уровня rouge-like игры — выглядит отлично для работы за 48 часов. Самое ценное то, что они открыли исходники

    Arithmetis



    https://www.angularattack.com/entries/371-ng-elol
    Автор проекта портировал свою игру (которая уже до этого была написана под несколько платформ) на Angular 2. Выглядит и работает хорошо, в том числе и на мобильных устройствах. Исходный код также открыт.

    А вот то, что получилось у меня



    https://www.angularattack.com/entries/2166-maple-syrup
    https://andreichernykh.2016.angularattack.io/

    Хочу отметить, что код местами написан не оптимально, многое в коде и юзабельности приложения можно значительно улучшить. Да, и за время хакатона я, конечно же, не успел оптимизировать игру для работы на мобильных устройствах. 48 часов мне объективно не хватило, чтобы всем этим заняться. Спасибо за внимание, буду рад вашим отзывам и отвечу на все вопросы в комментариях!
    Wrike
    130,00
    Wrike делает совместную работу над проектами проще
    Поделиться публикацией

    Комментарии 16

      0
      Ссори за тупой коммент, но как поставить флажок в твоей игре? Уже все перепробовал
        0
        Абсолютно валидный вопрос, и, к тому же, самый популярный из тех, что мне задавали по этой игре.
        Краткий ответ — никак. Для победы достаточно просто открыть все незаминированные клетки.
        Причины, почему я не реализовал эту фичу, описаны в «уроках» 5 и 6.
          0
          Ааа, вот где собака зарыта)) В любом случае — спасибо за ответ )))
            0
            Пожалуйста.

            Я обязательно доделаю «флаги» на досуге.
              0
              Я просто обажаю сапера еще с бородатых времен видны, и тут же я кинулся проходить, думаю, вспомню молодость, но флаги то не ставятся… моему разочарованию не было предела… Удачи вам)
      +1
      Урок №2 про меня и мою команду, мы не успели) Спасибо, видели твою работу и оценил по всем параметрам amazing! Учтем и в следующий раз постараемся сделать что-то попроще и вложиться в первые 24 часа, а остальные 24 лучше тратить на обтачивание напильником.
        0
        Спасибо за лестный отзыв! Хотя, конечно, моя работа не дотягивала до amazing (особенно по пункту «Innovation»).

        А какой проект вы делали? Может добавите ссылку в комментарий?
        Ну, и было бы классно, если бы вы поделились кратко своими впечатлениями от хакатона. Особенно интересно услышать мнение от людей, участвовавших командой.
          +1
          В общем, нас было 4ро)
          Над идеей думали прям в тот же вечер… и это было роковой ошибкой.
          В итоге сошлись на таск менеджере с томато таймером и сетевыми возможностями типа команда и над ней лидер и прочее.
          В первую ночь спали мало, было много проблем с документацией a2 (роутинг особенно доставил беды), плюс последние апдейты не работали когда их ставишь в кучу)
          За первые пару часов все прошли туториал (в нём тогда не было 2х последних разделов).
          И распределив задачи начали кодить, один был бекендером (firebase) написал все функции и тд, два дизайнеро-фронтендера и еще один фронт).
          В команде у людей не было опыта совсем.
          Застряли на том что firebase блокировала доступ, хотя всё было разрешено, и все… тут завал полнейший. В итоге не доделали и ждали результатов.
          Теперь может по свободе доберемся и доделаем)
          https://www.angularattack.com/entries/2962-zengineers
          В любом случае мы довольны, всю ночь было весело, и командный кодинг это клево, плюс поняли в чем были ошибки, и в следующий раз будем подготовлены иначе).
          Спасибо и тебе!)
          И да… через 2 дня firebase получает новый сайт с конвертированием в новый формат и прочим…
          Видимо не судьба была на ней что-то сделать.
          Особенно мне не нравится что запутанная документация в плане прав, я так и не понял, как запретить доступ к приватным данных других юзеров.
            0
            Спасибо, что поделились своей историей!

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

            И еще один совет на будущее (для подобных мероприятий): по возможности, не тратьте время на реализацию авторизации. Примерно на четвертом или пятом приложении, которое мне предложило авторизоваться через Google, я просто стал их пропускать, т.к. часто авторизация не работала, или же запрашивался доступ ко всему подряд.

            Разумно поступили те разработчики, которые предоставляли тестовый аккаунт (логин/пароль) с подготовленными тестовыми данными.
        0
        Да, идея оригинальная. И главное неожиданная…

        Я припоминаю, недавних победителей Imagine Cup с идеей социальной сети, не исключено, что и здесь победу вам отдадут.
          +1

          Статью не читай @ комментарий пиши: Победитель в командном зачёте.


          Ну и с точки зрения кода, минёр интереснее многих других проектов. Но автор указал, что понял это только на своём опыте.
          Лично я считаю, что это всё затевается по большей части, чтобы набрать кодовую базу для нового фреймворка. Да, внешний вид сильно влияет на победу. Но не исключено, что компании-партнёры мероприятия могут кинуть офер на работу человеку, проект которого не столь популярный, но зато хороший в техническом плане.

            0
            Вполне вероятно. Хотя конкретно в данном случае, как мне кажется, главной целью организации хакатона был пиар Angular 2, ну и, конечно же, реклама спонсоров.
            0
            Как я уже написал в статье, победу мне не отдали, к сожалению. Хотя я был довольно близок, как мне кажется.
            Со списком победителей вы можете ознакомиться на Angular Attack.
            +1
            У нас тоже была команда из 4х, идею придумали за неделю до хакатона, из минусов — не проработали АРI и потратили на это много времени. Как результат — мало тестировали приложения. И да — код никто не смотрит :) Наше решение
              0
              Выглядит очень неплохо. Вы молодцы. Я не знаю, конечно, что там под капотом, но на первый взгляд приложение оставляет впечатление законченного проекта: приятный дизайн, быстро работает, баги если и есть, то не на поверхности.

              К сожалению, типичные приложения привлекали мало внимания со стороны других участников. К своему стыду, я вашу работу не заметил, т.к. проектов было много и получилось оценить от силы процентов 15. И в основном это были те приложения, которые бросались в глаза, в особенности различные игры (которые часто, кстати, оказывались так себе).

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

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