Этапы разработки ПО, сайта и приложения

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

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

Этапы разработки программного обеспечения

Если отвечать коротко на вопрос, что такое разработка программного обеспечения, это путь от идеи до программы, которой пользуются живые люди. В англоязычных источниках его называют SDLC (Software Development Life Cycle, жизненный цикл разработки программного обеспечения). Жизненный цикл разработки начинается задолго до первой строки кода и не заканчивается релизом: после запуска продукт обновляют, чинят и развивают годами.

Этапы разработки программы у нас идут в таком порядке:

1. Сбор и анализ требований: цели бизнеса, пользователи, функции, ограничения.
2. Проектирование: архитектура, схема данных, прототип экранов.
3. Дизайн интерфейса: внешний вид, компоненты, состояния экранов.
4. Программирование: клиентская часть, сервер, интеграции.
5. Тестирование: проверка функций, нагрузки, совместимости с устройствами.
6. Запуск: публикация в сторах или перенос на рабочий сервер.
7. Поддержка и развитие: исправления, обновления, новые функции.

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

Сколько весит каждый этап, хорошо видно по мобильным проектам. Обычно аналитика и ТЗ забирают 10-15 процентов сметы, дизайн 15-25, разработка 50-60, тестирование 10-15, управление проектом еще 10-15. На сам код приходится около половины бюджета. Остальное уходит на то, чтобы писать нужный код и не переписывать его после релиза.

Как мы ведем такие проекты целиком, описано на странице про разработку программного обеспечения на заказ.

Этапы создания программы

Создание программного обеспечения по шагам выглядит так. Для каждого этапа указываем, что делает студия и чего мы ждем от заказчика.

Анализ отвечает на вопрос, что именно строим и зачем. Аналитик проводит интервью с заказчиком и будущими пользователями, разбирает текущий процесс, смотрит на похожие продукты. Итог этапа: список функций с приоритетами и описание ролей пользователей. От заказчика здесь нужно больше всего времени: ответить на вопросы, дать доступ к сотрудникам, которые будут работать с программой, и честно назвать ограничения. Три параметра любого проекта связаны между собой: объем функций, срок, бюджет. Зафиксировать можно два, третий подстроится.

Результаты анализа ложатся в техническое задание (документ, где описано, что должна делать программа и по каким признакам ее принимают). ТЗ можно писать своими силами, но чаще его готовит студия вместе с заказчиком. У нас это отдельная услуга, разработка технического задания. С готовым ТЗ проще сравнить предложения подрядчиков: все считают одно и то же.

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

Дизайн превращает схемы в готовые экраны: цвета, шрифты, иконки, анимации, состояния кнопок и ошибок. Разработчикам дизайнер отдает библиотеку компонентов, из которых собраны все экраны, и макеты каждого состояния. Заказчик согласует стиль на двух-трех ключевых экранах, дальше дизайн раскатывается на остальные.

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

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

Запуск мобильного приложения означает публикацию в App Store и Google Play: нужны аккаунты разработчика, описание, скриншоты, политика конфиденциальности. Аккаунт Apple Developer стоит 99 долларов в год, регистрация в Google Play обходится в 25 долларов один раз. Для сайта и веб-сервиса запуск включает перенос на рабочий сервер, настройку домена, SSL-сертификата, резервного копирования и мониторинга.

Поддержка начинается на следующий день после релиза. Приходят отзывы, выходят новые версии iOS и Android, меняются требования сторов, бизнес просит новые функции. Поддержка приложения обычно обходится в 15-25 процентов от стоимости разработки в год. Эту сумму лучше заложить в план сразу, чтобы продукт не устарел через год после запуска.

Как сделать свой софт?

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

• Сделать самому. Для простых задач хватит no-code конструктора или таблиц с формулами и скриптами. Для программы посложнее придется учить язык программирования: Python для автоматизации, JavaScript для веба, Kotlin или Swift для мобильных приложений. Путь долгий, зато бесплатный.
• Нанять фрилансера. Подходит для небольшого программного продукта с понятным ТЗ. Риск в том, что один человек закрывает все этапы, включая тестирование, и может пропасть в середине работы.
• Заказать студии. Студия закрывает весь жизненный цикл: аналитику, дизайн, код, тестирование, запуск и поддержку. Выходит дороже фриланса, зато у проекта есть менеджер, договор и замена на случай, если разработчик заболел.

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

Этапы создания ПО и модели жизненного цикла

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

• Каскадная модель (waterfall). Этапы идут строго друг за другом: сначала полное ТЗ, потом весь дизайн, потом весь код. Подходит, когда требования известны заранее и не поменяются, например при доработке системы по утвержденному регламенту. Минус: ошибку в требованиях обнаруживают в конце, когда исправлять дорого.
• Итеративная модель. Продукт собирают кругами: каждый круг проходит все этапы жизненного цикла на небольшом наборе функций. Первая рабочая версия появляется рано, следующие обрастают функциями.
• Спиральная модель. Похожа на итеративную, но в начале каждого витка команда отдельно оценивает риски: технические, финансовые, рыночные. Ее выбирают для больших проектов с непроверенной технологией.
• Гибкие методологии (Agile, Scrum, Kanban). Работа идет спринтами, план пересматривается после каждого, заказчик видит результат регулярно. Постоянная обратная связь от заказчика и конечных пользователей заменяет толстое ТЗ на старте.

Мы чаще работаем гибко, но от документации не отказываемся: короткое ТЗ на первую версию, дальше спринты. Для заказчика с фиксированной сметой делаем гибрид. Объем первой версии фиксируем по каскаду, развитие ведем итерациями. Управление проектом в любой модели держит менеджер: он следит за сроками, собирает демо и переводит пожелания бизнеса в задачи для команды.

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

Этапы создания сайта

Сайт проходит те же шаги, что и программа, с поправками на поиск, контент и хостинг. Для корпоративного сайта или интернет-магазина порядок такой:

1. Бриф и анализ: цели сайта, целевые действия посетителей, конкуренты в поисковой выдаче.
2. Структура и SEO-проектирование: список страниц, собранные поисковые запросы, распределение запросов по страницам.
3. Прототипы ключевых страниц: главной, каталога, карточки товара, формы заявки.
4. Дизайн: макеты для компьютера и телефона.
5. Верстка и программирование: шаблоны, CMS или собственный бэкенд, интеграции с CRM и оплатой.
6. Наполнение: тексты, фото, карточки товаров, мета-теги.
7. Тестирование: формы, корзина, скорость загрузки, отображение в разных браузерах.
8. Запуск и поддержка: перенос на хостинг, подключение аналитики, исправления, обновления CMS.

Заказчик участвует на брифе, согласует прототипы и дизайн, дает контент и принимает готовый сайт. Самое медленное место почти всегда контент: тексты и фото ждут неделями, а без них сайт не запустить. Мы советуем собирать материалы параллельно с дизайном, а не после верстки.

Этапы разработки сайта

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

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

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

Разработка сайта с нуля

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

• на сайте есть личный кабинет, калькулятор, бронирование или другая логика, которой нет в готовых модулях;
• нужна интеграция с 1С, CRM или складом;
• ожидается большая нагрузка, например распродажи или крупные рекламные кампании;
• сайт станет основой будущего веб-сервиса или мобильного приложения.

Если нужен сайт-визитка на несколько страниц, разработка сайтов с нуля обычно не окупается. Шаблон с аккуратной доработкой решит такую задачу быстрее и дешевле.

Что нужно для создания сайта?

Минимальный набор выглядит так:

• Домен: адрес сайта, его регистрируют у аккредитованного регистратора и продлевают каждый год.
• Хостинг или сервер: место, где лежат файлы и база данных сайта.
• SSL-сертификат, чтобы сайт открывался по https и браузер не предупреждал об опасности.
• Платформа: конструктор, CMS или собственный код.
• Контент: тексты, фото, цены, контакты, реквизиты.
• Юридические документы: политика обработки персональных данных и согласие на обработку, если на сайте есть формы. В России этого требует закон 152-ФЗ.
• Счетчики аналитики и панели вебмастера, чтобы видеть посетителей и следить за индексацией.

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

Как создать свой веб сайт?

Путь зависит от того, что сайт должен делать.

• Конструктор. Подходит для визитки, портфолио, страницы мероприятия. Сайт собирают из готовых блоков и платят подписку. Ограничение: сложную логику и нестандартный дизайн не сделать, а переезд с конструктора на другую платформу почти всегда означает пересборку.
• CMS с готовым шаблоном. Подходит для блога, корпоративного сайта, небольшого магазина. Нужен человек, который установит систему, настроит шаблон и будет обновлять плагины.
• Заказная разработка. Подходит для интернет-магазина с интеграциями, сервиса с личными кабинетами, портала. Проходит все этапы, описанные выше, и требует ТЗ.

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

Какой сайт создать?

Тип сайта следует из цели:

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

Если сомневаетесь, начните с того, что клиент должен сделать на сайте в первый визит. Одно целевое действие ведет к лендингу, десятки сценариев с регистрацией ведут к веб-сервису. Примерную стоимость своего варианта можно прикинуть в калькуляторе. Демо-проекты студии Капиталика, Грядка и Трассер показывают, как одни и те же этапы выглядят на разных продуктах.