На создание отличных продуктов могут уйти годы - вот еще одно решение.

На рынок постоянно выходят новые продукты как от новых стартапов, так и от крупных корпораций. Некоторые из них строились годами, другие - за пару недель.

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

Это подводит нас к идее прототипирования и создания MVP.

В этом посте я кратко объясню идею прототипирования и MVP. Мы рассмотрим, почему Lean Stack помогает создать хороший прототип и преобразовать его в реальный продукт. Наконец, я покажу практический пример бережливого стека.

Почему может быть полезно прототипирование?

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

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

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

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

Как программист, которому нравится разработка пользовательского интерфейса, мне удобнее использовать код вместо такого инструмента, как PowerPoint. Помните, что при создании прототипов и MVP с использованием кода легко потеряться в деталях и упасть в деталях. Вот почему я считаю, что у вас должен быть Lean Stack, чтобы иметь возможность быстро выполнять итерацию и поставлять продукцию, не забывая при этом о ваших ограниченных ресурсах. В этом посте мы более подробно рассмотрим второй подход, который включает концепцию Lean Stack.

Lean Stack для создания потрясающих прототипов

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

  • Используйте автономные фреймворки и библиотеки пользовательского интерфейса для создания быстрых и визуально привлекательных пользовательских интерфейсов. Таким образом, вы не тратите время на переосмысление того, что уже есть, и можете сосредоточиться на своих УТП (уникальных преимуществах). Существует множество популярных и зрелых фреймворков, таких как Nebular, Material-UI и BootstrapVue, которые предоставляют общие компоненты и функциональность.
  • Во время работы над прототипом изменения кода в прототипе должны применяться автоматически в мгновение ока. Популярные фреймворки, такие как Angular, React или Vue.js, поддерживают автоматическую перезагрузку страницы или даже отдельных частей при изменении кода. Это должно быть быстро, потому что при том темпе, в котором вам нужно будет работать над прототипом, меньше всего вам нужно беспокоиться о том, что вы продолжаете тратить время, ожидая применения ваших изменений.
  • В какой-то момент вы хотите позволить (потенциальным) клиентам испытать то, что вы создали, поэтому вам нужен способ предоставить к ним доступ. С помощью платформ самообслуживания, таких как Netlify или DigitalOcean, вы можете сделать свой веб-сайт или приложение доступным для всех в считанные минуты. В идеале вы отправляете свои изменения в репозиторий Git (например, размещенный на GitHub), и они автоматически развертываются на выбранной вами платформе без дальнейшего ручного взаимодействия с использованием непрерывного развертывания.
  • Инструменты отслеживания и мониторинга помогают собирать данные о товарах и анализировать их. Вы можете отслеживать, как пользователи взаимодействуют с вашим продуктом (например, с помощью Hotjar), быстро реагировать на проблемы, прежде чем пользователи сообщат о них (например, с помощью Sentry) и предоставят им обратную связь (например, с помощью Intercom).

С помощью Lean Stack вы сможете управлять переходом от прототипа к MVP и конечному продукту. Если все сделано правильно, вы также не тратите время зря, поскольку вам не нужно воссоздавать прототип с реальным кодом, а настройка (например, автоматическое развертывание) уже на месте.

Конечно, даже Lean Stack не спасет вас от неправильных поступков. Я собрал несколько типичных ошибок, которые можно легко сделать при создании прототипов и MVP.



Как избежать распространенных ошибок при создании прототипов и MVP
Создавайте прототипы и MVP, которые превращаются в отличные продукты ali-dev.medium.com



Пример настройки Lean Stack для создания прототипа

Давайте рассмотрим практический пример того, как создать прототип веб-приложения с помощью Lean Stack.

  1. Установите Node.js. Он понадобится нам для локального запуска нашего прототипа.
  2. Установите Angular CLI: npm install -g @angular/cli. -g сделает Angular CLI глобально доступным.
  3. Создайте новый проект Angular с помощью Angular CLI: ng new my-prototype-app && cd my-prototype-app. Это создаст базовый проект Angular и перейдет в этот только что созданный каталог.
  4. Установите Библиотеку Nebular UI: ng add @nebular/theme. С Nebular у нас есть много полезных компонентов, тем и дополнительных функций, таких как модули авторизации и безопасности, готовые для использования в нашем прототипе.
  5. Установите и включите Bulma.css: npm install bulma.
  6. Измените сгенерированный компонент AppComponent, чтобы наш прототип выглядел так, как мы хотим (см. Упрощенный пример ниже).
  7. Создайте новый репозиторий на GitHub и протолкните репозиторий в него.
  8. Подключите репозиторий к Netlify. Нам нужно только предоставить команду сборки (ng build --prod), а также каталог публикации, и Netlify позаботится о развертывании нашего прототипа за нас.
  9. Включите в свое приложение скрипт отслеживания Hotjar, чтобы наглядно увидеть, как используется ваш прототип. Этот сценарий может быть либо непосредственно включен в код, либо вы можете позволить Netlify внедрить этот сценарий без изменения какого-либо кода.
  10. Включите автоматическое сообщение об ошибках с помощью Sentry, чтобы быстро выявлять проблемы и реагировать на них.
  11. Уточняйте свой прототип в случае ошибок или в ответ на отзывы

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

  • Angular - это универсальная и готовая к работе среда для создания приложений. Схема (например, с использованием ng add) - это основная функция Angular CLI, которая может автоматизировать такие шаги, как установка, расширение, построение и развертывание проектов Angular с помощью одной команды.
  • Nebular - это библиотека пользовательского интерфейса для Angular с батарейками, которая имеет множество преимуществ. Мы можем легко создавать красивые пользовательские интерфейсы, используя предоставленные компоненты, такие как кнопки, панели навигации, флажки и значки.
  • Bulma - это легкий CSS-фреймворк, не требующий JavaScript. Это делает Bulma очень гибкой в ​​использовании. Помимо компонентов, Bulma предоставляет вспомогательные классы утилит и мощную систему сеток для создания адаптивных макетов.
  • GitHub предоставляет хостинг для разработки программного обеспечения и контроля версий с помощью Git. Он чрезвычайно прост в использовании и является наиболее популярным выбором для проектов с открытым исходным кодом, а также для частных проектов. Кроме того, GitHub Actions упрощает автоматизацию всех ваших программных рабочих процессов.
  • Netlify - это платформа для публикации современных веб-проектов прямо из ваших репозиториев Git. Каждый раз, когда вы нажимаете на GitHub, Netlify запускает сборку и развертывает результат в CDN.
  • Hotjar - это инструмент, позволяющий лучше понять поведение пользователей, чтобы вы могли внести правильные изменения, улучшить UX и, в конечном итоге, создать лучший продукт для своих клиентов. Подобные инструменты позволяют нам увидеть, как пользователи взаимодействуют с прототипом.
  • Sentry - это кроссплатформенный мониторинг приложений с упором на создание отчетов об ошибках. Путем автоматического создания отчетов об ошибках и исключениях вы можете выявлять и устранять проблемы, вместо того, чтобы искать информацию или ждать, пока клиенты сообщат о них.

Последние мысли

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

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

Каков ваш опыт создания прототипов и MVP? Вы рекомендуете конкретные инструменты или фреймворки для создания прототипов? Дай мне знать в комментариях.