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, крім цього команди постили свої апдейти Twitter. І ті учасники, які активно писали про своїх проектах, отримували значно більше уваги і відгуків.

Резюме: цей хакатон виявився для мене чудовим досвідом. І хоча я не зайняв жодного з призових місць, я відчув азарт, поспілкувався з кількома цікавими людьми в 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 годин мені об'єктивно не вистачило, щоб усім цим зайнятися. Дякую за увагу, буду радий вашим відгукам і відповім на всі питання в коментарях!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.