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

Для начала определимся с терминологией.

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

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

Этапы создания веб-приложений

Чтобы создать веб-приложение, каждый проект мы планируем индивидуально под нужды, бюджет и сроки клиента. Но основные этапы работ для всех проектов общие.

Расскажем, как проходит и чего помогает достичь каждый этап.

1 этап: предпроектное исследование

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

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

Помогает определить целевую аудиторию и понять, чего она ожидает от сервиса. При создании веб-приложения это задача бизнес-анализа и UX-исследования.

Выделяет приоритетные функции, которые появятся в первой итерации проекта. Чтобы приоритезировать фичи, мы используем CJM (customer journey map) — карту пути пользователя. Она позволяет проанализировать потребности пользователей и то, как они взаимодействуют с сервисом. С этой информацией команда создаст удобное и понятное веб-приложение.

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

На предпроектном исследовании мы собираем команду из экспертов senior-уровня с опытом в той сфере, в которой будет работать продукт. Наши специалисты вместе с вашей командой формируют и проверяют гипотезы, помогают настроить работу продуктовых команд, строят roadmap продуктов. Исследование занимает 2–6 недель: за это время компания получает инсайты, рекомендации и планы, которые помогают развивать продукт следующие несколько лет.

Результаты этапа на примере Medium Quality: новое приложение вышло на первое место в сторах

Medium Quality, крупнейший паблишер русскоязычного YouTube, хотел создать собственное приложение для контента. Компания планировала снизить зависимость от сторонних платформ и внедрить больше возможностей обмениваться контентом. До этого Medium Quality не запускал IT-проекты, и новое приложение было для них экспериментальным стартапом.

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

• Внедрили для администраторов возможность настраивать, какой объём видео загружается в буфер для каждой публикации.
• Предусмотрели, чтобы контроллеры паузы и воспроизведения в приложении корректно срабатывали при системном отключении видео — как при падении наушника.

В результате создали приложение The Hole. Административные функции реализовали в веб-приложении. Также в него внедрили пользовательскую аналитику, возможность отследить потерянные кадры и считать частоту кадров. С помощью этих инструментов команда поддерживает высокий уровень качества видео и отслеживает реакцию пользователей.

Пользователи оставили много положительных отзывов, и приложение вышло на первое место в категории «Развлечения» в App Store. После запуска первой версии мы с командой Medium Quality активно развивали возможности делиться контентом и форматы просмотра видео.

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

Продюсер в Medium Quality

2 этап: дизайн веб-приложения

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

Проектирование технического дизайна

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

Проектирование пользовательского дизайна

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

Результаты этапа на примере Izzi: маркетплейс автоуслуг сделал сложное проще с помощью понятного интерфейса

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

Мы создали экосистему решений для клиентов и бизнеса с собственным бэкендом. B2B-решение реализовали на вебе. Оно предоставляло пользователям более сложные функции, поэтому нашей задачей было:

• Спроектировать интерфейсы B2C- и B2B-решения в фирменном стиле компании.
• Учесть сложность веб-версии и сделать приложение понятным для пользователей.

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

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

3 этап: разработка веб-приложения

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

Как мы разрабатываем веб-приложения:

1. Команда проектирует архитектуру решения и создаёт общий верхнеуровневый облик решения.
2. Выделяет потоки данных в будущем проекте и формирует информационную модель.
3. Описывает каждую функцию системы и сводит их в общую функциональную схему приложения.
4. Прописывает правила и схемы взаимодействия компонентов системы — создаёт спецификацию микросервисных API.
5. Определяет объём необходимых инфраструктурных мощностей, их структуру и конфигурацию развёртывания.
6. Уточняет схему развёртывания ПО — где, как и на каком оборудовании система будет работать.

Пункты в плане могут меняться в зависимости от особенностей проекта. Но ориентировочный план для большинства проектов выглядит именно так.

Технологии разработки веб-приложений

В веб-разработке обычно используют HTML для разметки веб-страниц, CSS для разметки стилей и JavaScript для создания диалоговых окон, анимаций, отправки форм.

Серверные приложения пишут на множестве языков — например, Kotlin, Golang или Python. Кроме этого, используются фреймворки: Flutter, React, Angular и Vue.js. Они ускоряют процесс разработки приложения для веба, так как содержат готовые решения для большинства рутинных задач. Мы работаем с этими и другими фреймворками и библиотеками, чтобы обеспечить оптимальную работу потоковых видео, камеры, геолокации, 3D-технологий и другой функциональности.

К универсальным технологиям относится Flutter Web. С помощью этой кроссплатформы от Google можно на единой кодовой базе создавать мобильные, веб и десктоп-приложения. Так бизнес может быстро запустить универсальное приложение или заменить существующее, если его удалили из сторов.

Приложения на Flutter позволяют переиспользовать большую часть кода между различными платформами. По нашему опыту, это позволит сэкономить до 40% бюджета при разработке для нескольких платформ.

Евгений Сатуров, лид Flutter-отдела

Результаты этапа на примере банковского приложения: PWA помогает справиться с блокировками из-за санкций

PWA (прогрессивные веб-приложения) работают как обычные веб-приложения, но пользователи могут установить их на свои устройства через браузер. Такая технология делает решение доступным для пользователей шести типов платформ: десктопных компьютеров на MacOS, Windows и Linux, смартфонов на iOS и Android и напрямую из веб-браузера.

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

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

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

4 этап: тестирование веб-приложения

После разработки решения команда проверяет его работоспособность и соответствие требованиям заказчика. Часто приложение тестируют параллельно с разработкой — по мере внедрения новых функций. Это позволяет избежать конфликтов между функциями и интеграциями. Благодаря тестированию команда выявляет и исправляет ошибки до релиза приложения.

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

• Операционным системам десктопных и мобильных устройств.
• Браузерам и их версиям — при этом учитывают, что версии браузеров обновляются часто.
• Плагинам, установленным в браузерах.
• Размерам экранов — на широкоформатном мониторе могут всплыть такие ошибки, которые незаметны на стандартном.
• «Железу» устройств, на которых будет работать приложение.

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

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

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

• Charles и Proxyman — для чтения и изменения трафика. Для чтения вполне подходит и стандартный DevTools в браузере, однако этими утилитами удобно подменять ответ, если это необходимо.
• Postman — помогает найти ошибки в API. Например, некорректно написанные запросы или проблемы с подключением к серверу.
• Browserstack — помогает протестировать веб-приложение в разных браузерах и версиях, не меняя рабочее место.
• Cypress — инструмент для end-to-end тестирования, который облегчает и уменьшает нагрузку на ручных тестах.

Результаты этапа на примере финтех-стартапа: тестирование помогло ускорить запуск платёжной системы и избежать ошибок

В 2022 году к нам обратился крупный стартап из финансовой сферы. Компания создавала новую международную платёжную систему на замену ушедшим из РФ. Наша задача — разработать веб-клиент и административную консоль с нуля. Решение нужно было запустить за 4 месяца, чтобы быстро занять нишу на рынке, и внести в Реестр российского ПО.

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

Чтобы уложиться в сроки и не снизить качество веб-приложения, мы автоматизировали тестирование при помощи инструмента Postman. Он позволил сократить время на проверки и не упустить ошибки: крупные шаблоны с множеством полей данных проверяли за несколько минут вместо нескольких часов.

В результате мы разработали и запустили новую платёжную систему и обеспечили соответствие нужным ГОСТам, чтобы она попала в Реестр российского ПО. Автоматизация тестирования помогла не растягивать проект и запустить систему с нуля всего за 4 месяца.

5 этап: поддержка

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

Поддержка от разработчиков

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

После запуска новых приложений мы предоставляем гарантию на нашу работу на 6 месяцев. Если за это время в приложении появятся технические проблемы, мы поможем их решить. В рамках условий SLA, который заключаем с заказчиком, мы сопровождаем приложение 24/7 и оперативно реагируем на возникающие сложности. Предоставляем отчёты по результатам проверок и исправлений и предлагаем, как оптимизировать решение.

Самостоятельная поддержка

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

Результаты этапа на примере KFC: как мы поддерживаем корпоративное приложение и постепенно передаём проект инхаус

KFC оптимизировал работу сотрудников и менеджмента. До проекта компания не использовала ERP-решения: все документы были в бумажном виде, менеджеры вели расписания в Excel-таблицах и разрозненных календарях. Без оцифровки и эффективных инструментов менеджерам было сложно управлять ресторанами, а компании — отслеживать деятельность более чем 1000 точек. Поэтому KFC решил внедрить систему автоматизации бизнес-процессов.

Мы разработали ERP-решение, в котором реализовали аналитику с дашбордами, внедрили распознавание лиц для учёта рабочего времени и автоматизировали рутинные процессы менеджмента и персонала. Система распознавания лиц работает безошибочно и исключает мошенничество с временем начала и конца рабочего дня. Документооборот оцифровали и настроили удобный мониторинг показателей и статусов работы. В результате менеджеры компании экономят по 10 часов в неделю.

Проект мы развиваем и улучшаем с 2019 года. Компании понравились результаты, которые принесло новое решение, и руководство обсуждает возможность внедрить её и в других регионах работы сети. Со временем компания забрала бэкенд в инхаус и поддерживает его самостоятельно. Наша команда продолжает поддерживать фронтенд — детали работ не можем раскрывать из-за NDA.

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

Геннадий Дорофеев, менеджер инновационных продуктов в KFC

Веб-приложение для Medium Quality: как проходила разработка

Чтобы составить полную картину того, как проходит создание веб-приложения, разберём процесс на примере нашего проекта с Medium Quality. Для них мы создали приложение The Hole — аналог YouTube с расширенными возможностями.

1. Провели предпроектное исследование.

За несколько недель мы с командой Medium Quality проработали потребности целевой аудитории, исследовали конкурентов, продумали ценности приложения и составили карту пути пользователя (CJM). Это помогло определить приоритетные направления — в частности, на будущее мы запланировали развитие возможностей поделиться фрагментами видео. Составили план функций приложения по релизам и расписали работы на несколько релизов вперёд.

2. Спроектировали UI и UX приложения.

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

3. Разработали мобильное и веб-приложение.

Наша команда разработала веб-приложение для управления контентом с помощью React + Ant Design. Это рабочий инструмент для контент-менеджеров, в котором они публикуют видео и отправляют пользователям уведомления, добавляют дополнительную информацию и анализируют статистику просмотров в режиме онлайн.

Выбрали Flutter, чтобы снизить траты и эффективнее разрабатыватьВеб-приложение. решения для разных платформ одновременно. Чтобы команда MQ развивала продукт с поведения и желаний пользователей, интегрировали аналитику от Яндекса и Firebase.

4. Протестировали решение.

Шоу Medium Quality смотрит много людей — на их YouTube-канале Labelcom более 7 миллионов подписчиков. Поэтому нагрузочное тестирование приложения рассчитывали на 25 000 запросов в секунду с запасом 15%, чтобы оно выдерживало большой наплыв зрителей при трансляции популярных шоу.

В результате всех проверок и работ бэкенд выдерживает предложенную нагрузку с запасом 15% и способен быстро адаптироваться к растущей нагрузке — тесты показали, что он адаптируется за 10-15 минут.

5. Передали команде.

Создаём и запускаем веб-приложения под индивидуальные запросы

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

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