Успеть все: самые незаменимые инструменты на хакатоне

На хакатоне времени на разгон нет. Финалиста зачастую определяют не только навыки, а хорошо выполненная «домашняя работа» – готовый набор инструментов, ускоряющих разработку, и умение пользоваться ими. Пока одна команда будет искать подходящие сервисы, настраивать аккаунты и решать проблемы с оплатой, вторая сразу же приступит к созданию прототипа. И победит.
 
.![this image title](https://contestfiles.storage.yandexcloud.net/companies/0/contests/0/DALL%C2%B7E-2024-01-30-06.50.08---A-dynamic-illustration-showing-a-group-of-people-working-together-on-different-tasks-against-a-tight-deadline.-One-person-is-coding%2C-intently-focused--%281%29-%281%291706619237.jpg "Успеть все: самые незаменимые инструменты на хакатоне")
 
Поэтому давайте разберемся, какие фреймворки, системы, облака и нейросети помогут быстро стартовать на хакатоне. Практическими советами поделятся участники DevRel Hack 2.0, которые разработали за 42 часа прототип CRM-системы для управления, аналитики и рассылки. 
 
### Дизайн-система: не Figma единой
Редко когда хакатон устраивают программисты для программистов. Обычно мероприятие организуют инвесторы или заказчики, которые хотят решить конкретную проблему. Привлекательный и удобный UI вызовет интерес к прототипу. Быстро набросать макет внешнего вида можно в одном из этих приложений:
* [Mockplus](https://www.mockplus.com/). Китайский сервис с полной поддержкой командной работы и библиотекой готовых дизайнерских элементов. 
* [Pixso](https://pixso.net/). Еще один инструмент из Китая с возможностью передать файл всем участникам команды одним кликом. 
 
Несколько советов для хакатона:
Всегда сохраняйте проекты с прошлых конкурсов. Готовую базу решений можно и нужно переиспользовать, чтобы ускорить разработку. 
Заранее перенесите шаблоны в другие программы. Если раньше работа велась в Figma или Sketch, то эти наработки никуда не пропадут – все вышеперечисленные программы либо по умолчанию поддерживают файлы популярных дизайн-систем, либо имеют плагины для экспорта.
 
Сразу продумайте связь дизайн системы с фронтендом. Например, набор [Material UI для Figma](https://www.figma.com/community/file/912837788133317724) имеет реализацию в React и Vue. Это ускорит перенос шаблона во фреймворк.
**Тимур Абдурахманов, дизайнер команды FastCoders:**
>  «Прежде всего дизайн-система существенно упростила и ускорила работу над макетом. Кроме этого, в MUI, как и во всех хороших дизайн-системах, все элементы сделаны консистентно — размеры, скругления и другие параметры подогнаны друг под друга, что помогает сделать интерфейс красивым и простым для восприятия.
Я советую дизайнерам осваивать дизайн-системы. Помимо функционального и легкого в освоении MUI обратите внимание на опенсорсный Контур, также на Taiga UI от Тинькофф и Material Design от Google».
 
### Фронтенд-фреймворки: быстро делаем UI
Сверстанный в дизайн-системе макет нужно превратить в пользовательский интерфейс с рабочими кнопками и анимацией. Не стоит изобретать велосипед. Лучше всего взять проверенные open source решения. Их дополнительный плюс – наличие готовых фреймворков на базе применяемой дизайн-системы. Хорошо подойдут:
* ReactJS: Обширный выбор UI-фреймворков, например, [Material-UI](https://www.figma.com/community/file/912837788133317724), [Ant Design](https://ant.design/), [React Bootstrap](https://react-bootstrap.netlify.app/), улучшает визуальное оформление и UX.
* VueJS: Разнообразие UI-фреймворков, включая [Vuetify](https://vuetifyjs.com/), [Quasar](https://quasar.dev/), [Bootstrap Vue](https://bootstrap-vue.org/), обеспечивает гибкость и удобство в дизайне интерфейсов.
 
Советы для хакатона:
1. Выбирайте инструмент, который знаете лучше всего. Учить что-то новое времени не будет. 
2. Если есть возможность экспорта шаблона из дизайн-системы в HTML и CSS – пользуйтесь. В результате получите неидеальный код, но заметную экономию времени. 
3. Используйте реализацию дизайн-системы в фреймворке, например, Material UI: React или Vuetify.
 
**Павел Жирнов, бэкендер команды FastCoders:**
> «Важно посмотреть на проект в целом, тогда приходит понимание, с каким фреймворком лучше работать. В моем стеке сейчас есть Django, FastAPI и Flask. Каждый хорош по-своему. На хакатоне мы использовали DRF на бэкенде и React на фронтенде.
Стек нашей команды не какой-то специальный для соревнований, он востребован на рынке. Поэтому если вы успешны как разработчик на хакатонах с бизнес-задачами, то и с трудоустройством не будет проблем».
 
### Облако для бэкенда: ищем open source
Написать свой бэкенд с нуля – хорошая идея для хакатона на тему «пишем свой бэкенд с нуля». Во всех остальных случаях лучше выбрать облачный сервис ради готовых модулей для шаблонных функций: авторизации, push-уведомлений, сбора аналитики и т.д. Можно использовать open source решения:
* [Appwrite](https://appwrite.io/). Предлагает NoSQL API в качестве оболочки для MariaDB, а также бессерверные функции и удобные вебхуки для быстрой интеграции со сторонними сервисами. Наиболее близкий бесплатный аналог Firebase. 
* [Supabase](https://supabase.com/). Платформа, основанная на классической реляционной базе PostgreSQL, с большим выбором готовых open source модулей. 
* [Kuzzle](https://kuzzle.io/). Использует настоящую NoSQL базу данных Elasticsearch, в отличие от гибрида в Appwrite. Хорошо подходит для разработок в сфере интернета вещей благодаря собственной открытой IoT-платформе. 
 
Советы для хакатона:
1. До начала конкурса настройте сервер, базу данных и необходимые модули. 
2. Подключайте библиотеки, сервисы и сторонние API. При выборе между «написать код или использовать готовое решение» приоритет второму варианту. Продумайте заранее, какие библиотеки можно применить, изучите документацию к ним. 
 
**Жан Григорян, fullstack-разработчик команды RoseRoise:**
> «На DevRel Hack 2.0 мы применили Telegram API и ChatGPT API. Первый выполнял рассылку клиентам, а ChatGPT мы подключили как чат-бот в помощь DevRel'у. В случае Telegram API мы сэкономили время: сделать рассылку про новый хакатон тысяче участников через почту и API займет от силы 30 секунд, а вручную, может день, а то и больше. В случае ChatGPT API мы подключили функционал, который в принципе невозможно разработать на трехдневном хакатоне».
 
### Нейросети: еще один член команды
Искусственный интеллект не просто так стал трендом последних лет. На хакатоне ИИ может стать настоящим спасением, взяв на себя часть рутинных задач. Ускорят прототипирование:
Llama. Нейросеть для генерации кода и не только от Microsoft и Meta. Доступна для бесплатного коммерческого использования. 
GigaChat. Аналог ChatGPT от «Сбера». Предлагает внушительный бесплатный лимит токенов. Также умеет генерировать код по запросу на русском языке. 
Stable Diffusion. Полностью бесплатная, в отличие от Midjourney, нейросеть для генерации изображений. Поддерживает расширение стилей моделями LoRA. Позволяет быстро создавать уникальные иконки и раскрашивать наброски.
 
Советы для хакатона:
1. Для мозгового штурма дайте нейросети контекст. На банальный запрос ИИ даст банальный ответ. Если хотите получить реально рабочую идею, тщательно укажите все вводные данные и нюансы задачи. 
2. Генерируйте код. Нейросеть хорошо решает шаблонные задачи вроде автодополнения, написания простых конструкций и исправления ошибок.
3. Используйте API, чтобы быстро добавить новые функции в приложение: распознавание речи и изображений, синтез голоса и другие. 
4. Нейросеть часто ошибается. Проводите фактчекинг, проверяйте код на ошибки. 
 
**Евгений Стручков, капитан команды PRO100BYTE:**
> «С помощью ChatGPT мы проанализировали концепции дизайна, проработали функции приложения и определили полезные элементы в платформе для DevRel. Кроме того, мы протестировали извлечение информации из существующих форумов и командных мессенджеров, таких как Slack.
ChatGPT позволил нам быстро решать задачи, которые раньше занимали много времени. Однако стоит учесть, что чат-боты имеют ограничения в понимании сложных задач или контекстов, которые могут требовать более глубокого анализа. В таких случаях пока предпочтительно использовать традиционные методы разработки».
 
### Подведем итог
Для успешного участия на хакатоне нужно выбрать, изучить и заранее настроить:
* дизайн-систему;
* фронтенд-фреймворк;
* облако для разработки бэкенда.
 
По желанию в список можно добавить любые другие инструменты, которые ускорят вашу работу: нейросети, планировщики, сервисы заметок, онлайн-доски, групповые чаты. Чем больше подготовительной работы будет сделано до хакатона, тем выше шансы занять призовое место.