Как создать веб-приложение: 5 шагов к успешному запуску

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

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

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

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

Этапы разработки веб приложения

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

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

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

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

Поэтому перед разработкой веб-приложений мы рекомендуем провести предпроектное исследование. Благодаря нему правильная разработка веб-приложения помогает сократить затраты и ускорить выход на рынок.

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

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

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

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

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

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

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

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

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

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

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

Продюсер в Medium Quality

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы специализируемся на разработке веб-приложений (и веб приложений) для компаний из разных отраслей. И вот как мы их разрабатываем:

Команда проектирует архитектуру решения и создаёт общий верхнеуровневый облик решения.

Выделяет потоки данных в будущем проекте и формирует информационную модель.

Описывает каждую функцию системы и сводит их в общую функциональную схему приложения.

Прописывает правила и схемы взаимодействия компонентов системы — создаёт спецификацию микросервисных API.

Определяет объём необходимых инфраструктурных мощностей, их структуру и конфигурацию развёртывания.

Уточняет схему развёртывания ПО — где, как и на каком оборудовании система будет работать.

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

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

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

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

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

Евгений Сатуров, лид 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вопросы про разработку веб-приложений

Что включает в себя проектирование и разработка веб-приложений?

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

Какие этапы включает разработка интернет-приложений?

Чаще всего команда:

Собирает требования и исследует рынок, конкурентов, бизнес и т.д.

Формулирует план работ и планирует архитектуру приложения.

Дизайнит интерфейс и создаёт UX.

Разрабатывает фронтенд и бэкенд решения.

Тестирует и исправляет баги до релиза.

Запускает приложение в эксплуатацию.

Поддерживает по SLA, обновляет и мониторит метрики.

Что такое проектирование веб-приложений и зачем оно нужно?

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

Какие технологии используют для создания веб-приложений?

Для фронтенда чаще всего применяют HTML, CSS и JavaScript-фреймворки (React, Angular, Vue и др.). Для серверной части — такие языки и фреймворки как Kotlin, Python, Go, Node.js и т.д. Также используют базы данных, API, библиотеки для безопасности, системы кеширования и инструменты CI/CD.